javascript - 与 Vue.js 的页面数据输入交互

Question

我有一个数据输入页面，输入某些数据时需要执行各种操作。目前，为了操作数据，我将数据更改发送回服务器并刷新屏幕。该应用程序在内部网络上用于生产管理目的 - 因此 js 库的重新加载时间或文件大小等没有问题。我想我会尝试使用 javascript 来完成所有这些而不需要重新加载，这导致我考虑使用 Angular、React 和其他类似的框架/库。首先，几乎所有演示介绍都显示数据在一个元素中输入并立即在另一个元素中更新。这在这里并不是特别有用，因为只更新完整的数据(这样的过程在哪里有用!)。我研究了检查击键，然后接受回车键上的数据或离开元素的焦点并让转义键将数据返回到其初始状态。如果数据被接受，则需要启动各种不同的流程。Vue.js 是一个看起来“容易”学习并且可能有所帮助的框架。在下面的示例中，我为数据输入 block (标签和输入元素)创建了一个组件，其想法是传递参数并在适当时进行更新 - 但我不知道如何实现它。我的 Vue 实例附加到一个 div，我的组件是一个全局组件。在 div 里面我有

        <ms-pages></ms-pages>

我的组件是:

  Vue.component('ms-pages', {
template: '<div class="form-group row">' +
            '<label class="col-xs-4 col-form-label">Pages</label>' +
            '<div class="col-xs-8">' +
              '<input v-model="mspages" class="form-control" type="text">' +
            '</div>' + 
           '</div>',
 })

v-model 抛出错误，虽然我在 Vue 实例中定义了 mspages，但我也尝试在组件中定义它。然后我尝试在 Vue 实例中定义该组件，但找不到如何执行此操作。一种想法是该组件可以保存正在输入的数据的当前状态，但这似乎毫无意义，因为该数据位于 Enter 元素中。让我觉得这种做法也许是错误的。

我的 JavaScript 知识不是很好，但我可以尝试编写自己的函数来监听各种元素上的击键，但代码可能会变得又长又复杂。 (我发现在 python 中做这些事情要容易得多..)

非常感谢任何帮助。

Answer 1

Vue 是 MVVM ，因此 View 数据需要反射(reflect)模型数据，但这并不意味着您需要在每次数据更新时触发更新，Vue 只会为您保持所有内容同步。解决这个问题的通常方法是让家长传递 prop到一个组件，然后拥有组件 $emit某些事件发生时的更新。下面是一个示例，说明如何让组件在按下 Enter 键时更新您的值:

巴士

var bus= new Vue(); // A Vue instance to emit events onto

组件模板:

<template id="my-input">
  <div>
    <input v-model="inputVal" v-on:keyup.enter="updateVal"/>
  </div>
</template>

组件:

Vue.component('my-input', {
  template: '#my-input',
  data(){
    return {
      inputVal: ""
    }
  },
  props: ['initVal'],
  created(){
    this.inputVal = this.initVal
  },
  methods: {
    updateVal(){
      bus.$emit('updateVal', this.inputVal);
    }
  }
});

主要标记:

<div id="app">
  <my-input :init-val="myInput"></my-input>
  {{myInput}}
</div>

父 Vue 实例:

new Vue({
  el: '#app',
  data: {
    myInput: "foo"
  },
  created(){
    bus.$on('updateVal', (updatedVal) =>{
      this.myInput = updatedVal;
    });
  }
});

我意识到您是 Vue 新手，所以我将详细说明正在发生的事情:

首先我们有一个bus (只是一个空的 Vue 实例)我们 $emit事件并监听它们，注意这一行:bus.$emit('updateVal', this.inputVal);

这里，当按下回车键时，我们在总线上发出一个名为“updateVal”的事件，并在父级中监听该事件，如下所示:

bus.$on('updateVal', (updatedVal) =>{
  this.myInput = updatedVal;
});

如果您查看组件模板，您会发现我们使用了 v-on:keyup.enter="updateVal"它调用 updateVal按下 Enter 键时发出事件的方法。

您还应该注意到v-model只是保持组件输入同步，当我们想要进行实际更新时，我们会触发一个事件并更新我们的主变量。

这里唯一的另一件事是我们向组件传递了一个 prop 来设置初始值。

这是 JSFiddle:https://jsfiddle.net/k7cvq0f0/