Javascript html.erb模板中的v-model呈现函数（）{[native code]}

我正在将Vue.js添加到我的Rails 6应用程序中。该项目使用turbolinks，因此“vue turbolinks”是通过Thread安装的，我的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>

然而，将“v-model”更改为“v-on:input”会实现我期望它能做的事情：在输入时更新消息

---

有谁能告诉我这里发生了什么，或者给我指出解决问题的正确方向吗。提前感谢您的时间。

您可以使用以下内容创建模板绑定：

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

将事件侦听器附加到：

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

因此，这是预期的行为，因为您显然试图将事件侦听器附加到输入事件

当您使用

v-model

（错误）时，它计算表达式以将其放入输入的

值中，就像它是一个基本绑定一样。因为你的表达式是一个函数，所以你得到了你所得到的结果

您的困惑可能是因为
v-model
是一种特殊的语法，它既是绑定又是侦听器，但这些都是预定义的。这意味着，当您使用它时，您不会指定您自己的侦听器，而是希望它在从子对象接收到
输入
事件时更改的模型

"function () { [native code] }"