javascript 这是 v-on:change 的正确用法吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47870889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is this a correct usage of v-on:change?
提问by user9993
I have a text input that has a v-modeland a v-on:changeattached to it. As the user types I update an array in dataand the UI is bound to that array. I also want to call a method to send the user input via AJAX. The data sent to the server is the result of a computed property.
我有一个带有 av-model和 a的文本输入v-on:change。当用户键入时，我更新了一个数组，data并且 UI 绑定到该数组。我还想调用一个方法来通过 AJAX 发送用户输入。发送到服务器的数据是计算属性的结果。
<div id="app">
<input
id="user-input"
type="text"
v-model="userInput"
v-on:change="process()">
<ul id="parsed-list">
<li v-for="item in parsedInput">
{{ item }}
</li>
</ul>
</div>
let parse = input => {
return input.split(',')
}
let serverProcess = values => {
// Send array to server
}
new Vue({
el: '#app',
data: {
userInput: ''
},
computed: {
parsedInput () {
return parse(this.userInput)
}
},
methods: {
process () {
serverProcess(this.parsedInput);
}
}
});
Is this usage of both a v-modeland v-on:changetogether best practice Vue?
这是一个v-model和v-on:change一起使用最佳实践 Vue 的用法吗？
采纳答案by kmc059000
I recommend using a watch instead of a v-on:change. In the view, you would remove the v-on:change. Any time parsedInputchanges (due to userInput changing), then the watch function will be called. It is important that the watch function be named the same as the computed/data property.
我建议使用手表而不是v-on:change. 在视图中，您将删除v-on:change. 任何时间parsedInput更改（由于 userInput 更改），都会调用 watch 函数。重要的是 watch 函数的名称与计算/数据属性相同。
new Vue({
computed: {
parsedInput () {
return parse(this.userInput)
}
}
methods: {
process () {
serverProcess(this.parsedInput);
}
},
watch: {
parsedInput() {
this.process()
}
}
})
You can read more about watches here https://vuejs.org/v2/guide/computed.html#Watchers
你可以在这里阅读更多关于手表的信息https://vuejs.org/v2/guide/computed.html#Watchers
IMO, this is better because you are describing more of the behavior of the application through code rather than the view. This would make your component more testable. It also has the effect that if parsedInputor userInputchanged for some other reason other than through v-model, then the watch would be called.
IMO，这更好，因为您通过代码而不是视图来描述应用程序的更多行为。这将使您的组件更具可测试性。它还具有以下效果：如果parsedInput或userInput因除 v-model 以外的其他原因而更改，则将调用该手表。
回答by Phil
thumbs up@kmc0590000 As addition. With watch you can also see the previous state and current. They are passed as parameters.
竖起大拇指@kmc0590000 作为补充。使用手表，您还可以查看以前的状态和当前状态。它们作为参数传递。
v-modelis just syntactic sugar and does the following:
v-model只是语法糖，并执行以下操作：
<input :value="userInput" @input="change">
You can also write @changeinstead of v-on:and :valueinstead of v-bind:value.
您也可以编写@change代替v-on:和:value代替v-bind:value。
In Line 6 (v-on:change="process()") you can remove the parentheses. The input event is given to your method as parameter and you can access the attributes directly. (https://vuejs.org/v2/guide/events.html#Method-Event-Handlers)
在第 6 行 ( v-on:change="process()") 中，您可以删除括号。输入事件作为参数提供给您的方法，您可以直接访问属性。( https://vuejs.org/v2/guide/events.html#Method-Event-Handlers)
