Почему Vue не видит переменную?

Question

[IsTrueCondition]

Добрый день. Не могу понять почему не могу обратиться к переменной которая есть в data: {}

data: function() {
		return {
			default: {
				...
				hasSelected: false;
				...
			},
			dirty: {
				...
				hasSelected: false;
				...
			},
		}
	}

В методах я обновляю переменную в dirty так:
Menu.dirty.hasSelected = Boolean(hasSelected);

Если вывести console.log, то все окей... переменная выводится... а вот при рендере html ошибка...

В HTML обращаюсь к данной переменной в цикле v-for и выдает ошибку что TypeError: Cannot read property 'hasSelected' of undefined"

...
	<div v-if="this.dirty.hasSelected">Lorem</div>
...

Comments

[Дмитрий Кузнецов]

Мб так надо писать?

data() {
   return {
       ...
   }
}

[IsTrueCondition]

Дмитрий Кузнецов, в чем разница? что так и так функция

[Дмитрий Кузнецов]

IsTrueCondition, за мою небольшую практику во VueJS я ни разу не видел что бы так писали. Вот и подумал, может быть проблема как раз таки в этом.

Answer 1

[Дмитрий]

В шаблонах не нужно указывать this

Comments

[drawnofmymind]

да пофиг что он указывает, тут все не так.
Обновлять надо через methods this.dirty.hasSelected = Boolean(hasSelected);
А что и как он выводит через v-for.. сложно представить

[IsTrueCondition]

drawnofmymind, Не помню почему перестал указывать this и стал прямо на vue обращаться. Короче говоря опыта у меня не много, но тут чет вообще не понимал почему не хочет получать переменную... уже много похожего кода сделал и все работало...

[IsTrueCondition]

Дмитрий, Спасибо, но можете объяснить? для отрисовки самого окна я через this обращаюсь и все отлично работает, а тут не работало. Насколько понимаю что в цикле this меняется?

[IsTrueCondition]

Код был примерно следующим:

<div class="cars" v-if="this.dirty.carsListActive">
	<div class="vehicle" :data-number="index" :data-vehicleName="vehicle['name']" v-for="(vehicle, index) in this.carsList">
		<div class="vehicle__image">
			<img :src="`../../../public/images/cars/${vehicle['model']}.png`" alt="">
		</div>
		<div class="vehicle__info">
			<div class="vehicle__name">{{vehicle['name']}}</div>
		</div>
		<div class="vehicle__actions" v-if="dirty.vehicleSelected">
                                    
		</div>
	</div>
</div>

[drawnofmymind]

IsTrueCondition, Ну это не лучшая практика, например захочешь имя компонента поменять, а у тебя везде обращение идет через имя этого компонента и все сломается. А если через this, то будет обращаться корректно)

[IsTrueCondition]

drawnofmymind, ну вот я не помню почему я стал указывать не через this. Так то я понимаю что я делаю лишнюю работу вообщем то)

[drawnofmymind]

IsTrueCondition, покажи цикл, обычно там item in dirty => item.selected , поэтому нет необходимости указывать this

[IsTrueCondition]

drawnofmymind, вон выше скинул. Вывожу список машин. Ну часть кода затер тк там много условий для кнопок) раньше указывал this.dirty.vehicleSelected

[drawnofmymind]

<div class="cars" v-if="dirty.carsListActive">
  <div class="vehicle" :data-number="index" :data-vehicleName="vehicle.name" v-for="vehicle in carsList">
    <div class="vehicle__image">
      <img :src="`../../../public/images/cars/${vehicle.model}.png`" alt="">
    </div>
    <div class="vehicle__info">
      <div class="vehicle__name">{{vehicle.name}}</div>
    </div>
    <div class="vehicle__actions" v-if="dirty.vehicleSelected">
                                    
    </div>
  </div>
</div>

если у тебя в vehicle есть свойство model , зачем через ['model'] ?

[IsTrueCondition]

drawnofmymind, хз. Просто не всегда прилетают обьекты в других случаях) и как то так и привык писать. А так разницы в этом варианте нету. Тк все равно отправляю в vue серилизованный обьект