我有一个文本输入与v-model绑定它的值为data。我还希望能够在parse()值更改时调用我的v-model函数，以便更新同样位于data上的数组。
<div id="app">
<input
id="user-input"
type="text"
v-model="userInput">
<ul id="parsed-list">
<li v-for="item in parsedInput">
{{ item }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
userInput: '',
parsedInput: []
}
})
let parse = input => {
return input.split(',')
}
我应该如何使用v-model更改来更新data.parsedInput和parse()函数？这样做的Vue方式是什么？
依赖于另一个的数据属性的正确Vue方式是使用computed property，这样parsedInput会在userInput更改时自动更新：
let parse = input => {
return input.split(',')
}
new Vue({
el: '#app',
data: {
userInput: '',
},
computed: {
parsedInput() {
return parse(this.userInput)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<body>
<div id="app">
<input id="user-input" type="text" v-model="userInput">
<ul id="parsed-list">
<li v-for="item in parsedInput">
{{ item }}
</li>
</ul>
</div>
</body>作为旁注：在使用之前声明parse函数，以防止is not defined错误。