鍍金池/ 問答/HTML/ vue input校驗實現(xiàn)輸入框實時更新遇到的問題

vue input校驗實現(xiàn)輸入框實時更新遇到的問題

問題描述，在使用vue input校驗輸入內(nèi)容并且實時更新輸入框不生效

<div class="app">
    <input v-bind:value="something" v-on:input="update">
</div>
    var app = new Vue({
        el: ".app",
        data: {
            something: '123'
        },
        methods: {
            update: function (e) {
                this.something = 111; //只會第一次輸入后生效
                e.target.value = 111; //如果不手動將value設置111，不會實時更新input
            }
        }
    })

**問題在于，使用this.something = 111這一句后，在第一次輸入時，input中內(nèi)容確實變成了111
但是隨后的輸入input中的內(nèi)容就不是111了，隨著輸入內(nèi)容改變了（難道第一次出發(fā)了watcher，隨后緩存了？是為了避免每次input更改觸發(fā)watcher而引起的性能損耗么？），只有手動設置e.target.value = 111才能生效，所以為什么會第一次生效而后不會生效呢？**

**新增：重申下，我問的不是實現(xiàn)方式，而是為何會出現(xiàn)這種現(xiàn)象的原因，不要再說什么v-model,v-model就是:value="som" @input="som = $event.target.value" 的語法糖，
其中som = $event.target.value其實就是等于上面的e.target.value = 111，問題在于為何直接為data賦值第一次有效果后面無效**

回答
編輯回答
我以為

data() {

        return {
           something: '123'
        }
    }

把data按照這種方式試下

2018年5月30日 04:43
編輯回答
淡墨

data應該是一個函數(shù)，返回所有變量屬性組成的對象

2017年9月21日 11:24
編輯回答
歆久

watch的是data里面的something.(簡寫sth)
第一次觸發(fā)update時. sth = 123 ;然后 執(zhí)行 this.sth = 111;
第二次你觸發(fā)update時， sth = 111 ; watcher會認為你并沒有修改sth 所以沒有進行DOM更新 . 也就是你只能手動 e.target.value ....

2018年7月5日 04:39
編輯回答
檸檬藍

用v-model

2017年7月19日 00:37