这是v-on的正确用法：改变？

Question

我有一个文本输入，附有v-model和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);
    }
  }
});

将v-model和v-on:change这两种用法结合起来最佳实践Vue？

Answer 1

我建议使用手表而不是v-on:change。在视图中，您将删除v-on:change。任何时候parsedInput改变（由于userInput改变），然后将调用watch函数。将watch函数命名为与computed / data属性相同是很重要的。

new Vue({
    computed: {
        parsedInput () {
            return parse(this.userInput)
        }
    }
    methods: {
        process () {
            serverProcess(this.parsedInput);
        }
    },
    watch: {
        parsedInput() {
            this.process()
        }
    }
})

你可以在这里阅读更多关于手表https://vuejs.org/v2/guide/computed.html#Watchers

IMO，这更好，因为您通过代码而不是视图描述了应用程序的更多行为。这将使您的组件更易于测试。它还具有这样的效果：如果parsedInput或userInput由于其他原因而不是通过v-model而改变，则会调用手表。

Answer 2

竖起大拇指@ kmc0590000作为补充。通过手表，您还可以看到以前的状态和当前状态。它们作为参数传递。

v-model只是语法糖并执行以下操作：

<input :value="userInput" @input="change">

你也可以写@change而不是v-on:和:value而不是v-bind:value。

在第6行（v-on:change="process()"）中，您可以删除括号。输入事件作为参数提供给您的方法，您可以直接访问属性。 （https://vuejs.org/v2/guide/events.html#Method-Event-Handlers）