html.erb 模板中的 v-model 渲染 function () { [native code] }答案

【问题标题】：v-model in html.erb template renders function () { [native code] }html.erb 模板中的 v-model 渲染 function () { [native code] }
【发布时间】：2021-04-05 16:58:26
【问题描述】：

我正在将 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”可以满足我的预期：更新输入消息。

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

【问题讨论】：

标签： javascript ruby-on-rails vue.js vuejs2 vue-component

【解决方案1】：

您使用v-model 创建模板绑定：

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

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

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

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

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

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

【讨论】：