Vue.js Двусторонняя привязка данных не работает над элементом выбора

Question

Я пытаюсь установить значение моего элемента select в зависимости от некоторого состояния, но проблема в том, что моя модель обновляется, но DOM - нет.

вот очень простой пример того, что им пытаются достичь http://jsfiddle.net/chrislandeza/4Ly1xmrx/

В основном только говорят, что если значение моего выбора элемента 1, то установите его в 2

вот код из скрипки выше:

<div id='app'> 
     <select v-model="test"> 
      <option></option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
     </select> 
    </div> 

    <script> 
     new Vue({ 
      el: '#app', 
      data: { 
       test: '' 
      }, 
      watch: { 
       'test': function (newVal, oldVal) { 
        // some condition 
        if (newVal == 1) { 
         // manually set the value 
         this.test = '2'; 
        } 
       } 
      } 
     }); 
    </script> 

Я попытался с помощью метода и поставить его на событие в изменения вместо смотреть модель, но она не работает.

Любые мысли? Предложения приветствуются.

EDIT:.. Мое временное решение добавить v эль-= директиву «испытательную» на мой выберите элемент

<select v-model='test' v-el='test'> 

и вручную установить значение элемента с помощью это $$ тест .value = 2 после установки значения модели.

if (newVal == 1) { 
    // manually set the value 
    this.test = '2'; 
    this.$$.test.value = 2 
} 

Примечание: Я делаю гораздо более сложным/реалистическую вещь, чем этот пример и я в порядке с этим решением на данный момент. Тем не менее, я все еще ищу лучшее решение.

Answer 1

Да его работает правильно, если вы проверяете значение меняется я не вижу problem.it в значение меняется не то, что оказывается на странице