物業突變Vuejs

Question

所以我有一個多個代碼是這樣的：

<input id="data" type="text" v-model="data"> 
<label for="data">Data</label> 

我試圖做一個地產出它，這樣我就不會每次都重複一遍：

Vue.component('textbox', { 
    template: ` 
    <div> 
    <input :id="id" type="text" v-model="value"> 
    <label :for="id">{{ label }}</label> 
    </div> 
    `, 
    props: [ 
     "id", "value", "label", "for"], 
    watch: { 
    value: function(newVal){ 
     this.$emit('input', newVal) 
    } 
    } 
}) 

和訪問它在我的HTML這樣的：

<textbox v-model="data" id="someID" label="Data"></textbox> 

一切工作正常，但每次我在文本框中鍵入時間我在控制檯收到此警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" 
(found in component <textbox>) 

有沒有辦法刪除該警告消息？或者我做錯了方向？任何幫助將非常感激。

Answer 1

你根本不需要使用手錶。而不是使用V型，試試這個：

<input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)"> 

工作示例：http://codepen.io/CodinCat/pen/dNQopR?editors=1010