我有一个文本输入,上面有一个v-model和一个v-on:change.当用户输入时,我会在data中更新一个数组,UI会绑定到该array.我还想调用一个方法,通过AJAX发送用户输入.发送到服务器的数据是计算(computed)属性的结果.

<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-modelv-on:change最佳实践Vue?

推荐答案

我建议用手表代替v-on:change.在视图中,您将移除v-on:change.任何时候发生变化(由于用户输入发生变化),都会调用watch函数.watch函数的名称必须与computed/data属性的名称相同,这一点很重要.

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

你可以在这里阅读更多关于手表的信息

在我看来,这更好,因为您更多地通过代码而不是视图来描述应用程序的行为.这将使您的组件更易于测试.它还具有这样的效果:如果parsedInputuserInput因v型以外的其他原因而改变,那么手表将被调用.

Vue.js相关问答推荐

当props 的值改变时如何更新类'

Vuetify 3 改变 Select 的 colored颜色

Vue.js 3 运行时挂载组件实例

如何 for each 动态创建的按钮/文本字段设置唯一变量?

如何将 vuejs 项目部署到 heroku

如何使用 Vue 命名插槽呈现静态内容列表?

动态插入字符串上的 Vue 事件处理程序不起作用

如何在 Node.js 服务器上部署 Vue.js 应用程序

如何从 bootstrap-vue 模态监听事件?

如何告诉 Vue 应用使用 Firebase 模拟器?

如何确定 Vue 何时完成更新 DOM?

即使在生产模式下构建,VueJS 也会显示开发模式开发模式消息

如何将事件绑定到 Vuetify 中的树视图 node ?

Vue3在按钮单击时以编程方式创建组件实例

VueJS 路由 - 使用子路由和 Vuetify 时如何停止多个活动路由(active routes)?

是否有 v-cloak 逆?

Vue组件如何命名

在 Vue 单元测试中单击按钮时触发表单提交

如何在我的 vue js 中实现无限滚动

vue-cli@3 没有可用于依赖类型的模块工厂:CssDependency