Поле выбора не обновляет v-модель

Question

У меня есть небольшая проблема, которую я не могу решить. Я создал поле выбора, как это https://codepen.io/spqrinc/pen/wvaqrPj

<div id="app">
  Selected value: {{item.picked}}
  <hr />
<select v-model="item.picked">
  <option v-for="(item, index) in item.values" :value="item.value" :key="index">{{item.value}} - {{item.title}}</option>
</select>
</div>

Это работает (как вы можете видеть на примере).

Теперь я включил vue-router и добавил это:

  beforeRouteEnter (to, _from, next) {
            let querypath = `/path/to/api`;

            next (vm => {
                vm.$wait.start ('loading');
                axios
                .get (querypath).then ((resp) => {
                    vm.item = resp.data.data;
                    vm.item.picked = 1;
                    vm.$wait.end ('loading');
                });
            });
        },

Теперь первое значение выбирается автоматически. Но если я выберу другое значение, v-модель не будет обновлена. Selected value: всегда показывает 1.

Почему это так?

Спасибо за вашу помощь.

Answer 1

item.picked не реагирует в Selected value: {{item.picked}}, поэтому он читает только начальное значение при монтировании.

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

Чтобы исправить это, используйте вычисляемое свойство, которое возвращает item.picked.

например

• Refactor Selected value: {{item.picked}} в Selected value: {{pickedItem}}
• Добавить вычисленное свойство pickedItem

computed: {
    pickedItem() {
      return this.item.picked;
    }
  }