3

我正在将 Vue.js 添加到我的 Rails 6 应用程序中。该项目正在使用 turbolinks，因此“vue-turbolinks”是通过 yarn 安装的，我的 Vue 配置如下所示：

import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
Vue.use(TurbolinksAdapter);

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '[data-behavior="vue"]',

    data() {
      return {
        message: 'This string will update with input from text field',
      };
    },

    methods: {
      updateMessage(event) {
        this.message = event.target.value;
      },
    }
  });
});

我的rails模板（.html.erb）包含一个带有Vuejs“v-model”属性的文本字段

  <div data-behavior="vue">
    {{ message }}
      <%= f.text_field :title, "v-model": "updateMessage" %>
  </div>

Vue 似乎按预期工作，除了“v-model”输出文字函数而不是调用函数（updateMessage）。结果，文本字段呈现的值为

"function () { [native code] }"

但是，将“v-model”更改为“v-on:input”可以满足我的期望：更新输入消息。

任何人都可以阐明这里发生的事情或为我指出正确的方向来解决此问题。提前感谢您的时间。

4

1 回答 1

1

您使用以下命令创建模板绑定v-model：

您可以使用 v-model 指令创建双向数据绑定

您附加一个事件侦听器v-on：

将事件侦听器附加到元素。事件类型由参数表示。表达式可以是方法名称、内联语句，如果存在修饰符，则可以省略。

所以这是预期的行为，因为您显然正在尝试将事件侦听器附加到输入事件。

当您v-model（错误地）使用时，它会评估表达式以将其放入输入中value，就好像它是原始绑定一样。由于您的表达式是一个函数，因此您得到了您所做的结果。

您的困惑可能来自这样一个事实，v-model即既是绑定又是侦听器的特殊语法，但它们是预定义的。这意味着当您使用它时，您不会指定您自己的侦听器，而是指定您希望它在收到input子事件时更改的模型。

于 2020-12-29T00:37:44.710 回答