Vue Жизненный цикл: объект не определен при привязке атрибутов

Question

Кажется, у меня проблема с жизненным циклом vue - глобальные объекты, которые я извлекаю в DOM с использованием чего-то вроде {{ family.plusOne }}, определены.

Когда я его использую как атрибут, такой как :checked="family.plusOne" // ожидание истины как значения, оно не определено.

Я попытался запустить :check="callFunction()" и записать его на консоль.

Я получаю два звонка, один из которых говорит:

family.plusOne не определен

, а другой журнал для консоли:

family.plusOne имеет значение

, которое является ожидаемым значением.

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch">
    <input type="checkbox" id="switch" @change="setPlusOne($event.target.checked)" class="mdl-switch__input" :checked="(family.plusOne == 1)"/>
    <span class="mdl-switch__label" >{{family.plusOne == 1}}</span>
</label>

{{family.plus ==1 }} в пределах диапазона отображает значение true, но :checked="(family.plusOne ==1)" - значение false

Answer 1

Я предполагаю, что ваш объект family не существует как часть привязки данных по умолчанию в методе data() {}, который обычно используется для компонента Vue. js. Это будет означать, что перед монтированием компонента Vue не знает значение при компиляции шаблона, поэтому кажется, что значение не определено. Затем в какой-то момент вы, вероятно, обновляете ТОЛЬКО это свойство объекта family. Это означает, что реактивное состояние объекта никогда не менялось, поэтому Vue. js не знает, что ему нужно пересчитать шаблон ( реактивная "получка" ).

Чтобы убедиться, что я прав, убедитесь, что вы используете метод Vue.set(), или повторно свяжите новый объект с обновленным значением свойства для объекта family.

Answer 2

Я играл с фазами жизненного цикла

created() {
    this.populatePeople();
},
updated() {
    componentHandler.upgradeDom();
},

Это позволило мне обновить данные до загрузки DOM, и после некоторых решений я вызываю componentHandler.upgradeDom (), чтобы показать переключатели и переключатели правильно.

Answer 3

Во-первых, если вы передаете только family.plusOne, каков результат в потомке ?, неопределенный?

Во-вторых, можете ли вы использовать вычисляемое свойство, например

: checked = "computedFamilyPlusOne"

computed: { computedFamilyPlusOne: { if(this.family.plusOne == 1){ return true }else { return false } } }