Vue.js 双向数据绑定不适用于选择元素

Question

我正在尝试根据某些条件设置我的选择元素的值，但问题是我的模型正在更新但 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>

我尝试使用 method 并将其置于 change 事件 而不是 watching 模型，但它也不起作用。

有什么想法吗？非常感谢您的建议。

编辑： 我的临时解决方案是在我的选择元素上添加 v-el='test' 指令

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

并在设置模型的值后使用this.$$.test.value = 2手动设置元素的值。

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

注意：我正在做一个比这个例子更复杂/更现实的事情，并且 我现在对这个解决方案很好。不过，我仍在寻找更好的解决方案。

Answer 1

是的，如果您检查值正在更改，它可以正常工作，我没有看到问题。这是值更改而不是呈现给页面的内容