Question

我试图根据某些条件设置我的select元素的值，但问题是我的模型正在更新，但DOM不是。

这是我尝试实现http://jsfiddle.net/chrislandeza/4Ly1xmrx/

的基本示例

基本上只是说如果我的select元素的值是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>

我尝试使用方法并将其置于更改事件而不是观看模型，但它也无法正常工作。

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

修改我的临时解决方案是添加v-el =＆＃39; test＆＃39;我的选择元素的指令

<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

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

Vue.js双向数据绑定无法处理选择元素

1 个答案: