Vue.js雙向數據綁定不適用於選擇元素

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>

我嘗試使用method並將其放在change事件上，而不是觀看模型，但是它也不起作用。

有什么想法嗎？ 建議非常感激。

編輯：我的臨時解決方案是在我的選擇元素上添加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

是的，如果您檢查值正在更改，它可以正常工作，我看不到問題。這是值更改而不是頁面呈現的內容