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

Posted 2023-02-22

【中文标题】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”可以满足我的预期：更新输入消息。

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

【参考方案1】：

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

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

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

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

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

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

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