html.erb模板中的v-model呈现函数(){[本机代码]}

Question

我正在将Vue.js添加到我的Rails 6应用程序中。该项目使用涡轮链接，因此"；vue涡轮连杆"；是通过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(包含一个文本字段；v型"；属性

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

Vue似乎像预期的那样工作，除了"；v型"；正在输出文字函数，而不是调用函数(updateMessage(。因此，文本字段呈现为值

"function () { [native code] }"

然而；v型"；至"；v-on：输入；做我期望它做的事情：在输入时更新消息。

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

Answer 1

使用v-model:创建模板绑定

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

使用v-on:附加事件侦听器

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

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

当您使用v-model(错误地(时，它会对表达式求值，将其放入输入的value中，就好像它是一个基元绑定一样。因为你的表达式是一个函数，所以你得到了你所做的结果。

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