Vue. js - Невозможно запустить обновление DOM

Question

, поэтому у меня сложная вложенная структура, которая похожа на данные моего приложения Vue:

{
  x: {
    y: [{
      z: {
        a: 1
      }
    }]
  }
}

Хотя я использовал v-model в v-for с дочерним свойством, установив .z.a = 2 похоже, не вызывает это в пользовательском интерфейсе. Я подумал, хорошо, должно быть, я изменяю свойство без предупреждения Vue, no bigg ie Мне просто нужно использовать Vue.set.

Поэтому я попробовал следующее:

Vue.set(app.x.y[0].z, "a", 2)
Vue.set(app.x.y[0], "z", {a:2})
Vue.set(app.x.y, 0, app.x.y[0]) // app.x.y[0] is definitely {z:{a: 2}}
Vue.set(app.x, "y", app.y)
app.x.y = app.x.y.map(_ => _)

Хотя все это обычно помогает мне, в данном случае это, похоже, не работает. Если это что-то изменит, я использую v-model вместо традиционного реквизита, чтобы он синхронизировался с приложением. Интересно, возможно, это разъединяет app.x и фактическое свойство данных для x.

Я ищу способ запустить обновление DOM или правильно установить значение в Vue. Я также пробовал app.$forceUpdate() безрезультатно: /

РЕДАКТИРОВАТЬ: Хотя я не мог заставить Vue наблюдать изменение само по себе, я обнаружил, что у меня есть функция, которая заполняет z после инициализации {}. Я предполагаю, что Vue установил наблюдателей на z в тот момент, когда он был инициализирован, и поэтому не заметил никаких дальнейших изменений (т.е. добавление a в следующей строке). Изменив это, чтобы заполнить все возможные свойства при инициализации, в сочетании с любым из .set выше и $forceUpdate, я смог запустить обновление DOM. Это временный обходной путь, и я бы очень хотел, чтобы Vue автоматически отслеживал это обновление.

Answer 1

Вы можете попробовать вычисляемое свойство vue или наблюдателя . Это автоматически обнаружит изменения в ваших данных и обновит данные v-модели, которые у вас есть.

В этом примере изменение возвращаемого значения message будет автоматически применено к вводу.

<input v-model="message">

computed: {
    message(){
        return {x:{y:[1,2,3]}}
    }
}