input - vue.js 为什么在 keyup 没有更改绑定数据时将 value 设置为 $event.target.value？

Question

我正在使用 Vue JS 2

试图过滤掉一些不需要的字符(, . & / \ ' ")，我所做的是：</p>

1. 通过 v-model 绑定输入数据
2. 过滤掉非法字符并设置为何filteredVal时$event.target.value键入

    <template>
      <div id="app">
        <p>field1</p>
        <input type="text" v-model="name" @keyup="filterText($event)" />
        <p>name: {{ name }}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          name: ""
        };
      },
      methods: {
        filterText($event) {
          var filteredVal = $event.target.value.replace(/[.,/\\&‘“]/g, "");
          $event.target.value = filteredVal;
        },
      },
    };
    </script>

但是当我输入非法值（例如：test，）时，输入字段值与name.

我知道this.name = filteredVal可以按预期工作，但有什么区别？

标签： inputvuejs2

Answer 1

v-model 将忽略在任何表单元素上找到的初始值、选中或选定属性。它将始终将 Vue 实例数据视为事实来源。您应该在组件的 data 选项内声明 JavaScript 端的初始值。 您可以在https://vuejs.org/v2/guide/forms.html 中看到这一点。