【问题标题】:Vue v-model bind issueVue v-model 绑定问题
【发布时间】:2018-01-22 10:45:31
【问题描述】:

您好,我已经讨论这个问题好几天了。我正在尝试使用 Vue 的 v-model 将数据绑定到输入文本。我的 Vue 安装在我的项目中,并在标题中添加了 cdn 链接。文本框仅在重新加载时显示一瞬间的数据,然后消失。可能是安装问题?我直接在控制台的 Laravel 项目中安装了 npm vue。

我的 HTML:

<div id='postEdit'>

  <input type="text" name="title" id="title" class="form-control" v-model="post.body">

</div>

我的 Vue:

var edit = new Vue({
  el: '#postEdit',
  data: {
    post: {
      body: 'this is body'
    }
  },

});

我在控制台中运行 edit.post 时的输出:

Object { body: Getter & Setter, … }

【问题讨论】:

    标签: javascript node.js vue.js


    【解决方案1】:

    您的数据属性错误,它需要是一个返回对象的函数。改成这样:

    data () {
      return {
        post: {
          body: 'this is body'
        }
      }
    }
    

    【讨论】:

    • 那个没有解决问题,之前试了又试了,结果还是一样。
    • 无论如何,数据必须以这种方式声明。您是否为了确保更改生效而清除了浏览器缓存?
    • 刚刚清除了我的整个历史记录和缓存 - 还是一样。
    【解决方案2】:

    Vue.js documentation 表示在data 选项中您必须使用普通对象

    Vue 将递归地将其属性转换为 getter/setter 以使其“反应”。 对象必须是普通对象:忽略浏览器 API 对象和原型属性等原生对象。经验法则是数据应该只是数据 - 不建议观察具有自身状态行为的对象。

    对于您的示例,我将使用计算属性返回您的 postbody 属性。

    我的意思是this JSFiddle

    【讨论】:

    • 感谢您的回答 - 我非常确定它会起作用!但事实并非如此,现在我开始认为我的 Vue 或 Node 安装可能有问题?
    • 我对 Laravel 不熟悉,所以不知道 Vue 设置如何适应它,抱歉!但是,能否提供一个完整的源代码示例,看看发生了什么?
    【解决方案3】:

    只需将您的数据设为函数并再次检查即可。 proof

    <div id='postEdit'>
      <input type="text" name="title" id="title" class="form-control" v-model="post.body">
    </div>
    
    var edit = new Vue({
    el: '#postEdit',
    data: function() { 
      return {
          post: {
          body: 'this is bodygfdgfd'
          }
       }
     }
    });
    

    哦,还有这个控制台的东西……试试 edit.post.body

    您看到 {getter, setter} 是因为 Vue 使用 Object.defineProperty 方法“编译”数据对象来观察数据的变化。引擎盖下的吸气剂工作得很好,相信我;)

    【讨论】:

    • 我的 v-model 仍然不会绑定文本框中的 'post.body'
    • jsfiddle.net/horcrux88/sd81mbL9/1 小提琴有效...但在我的 Laravel 应用程序中它不起作用...
    猜你喜欢
    • 2018-11-02
    • 1970-01-01
    • 2020-10-29
    • 2020-01-23
    • 2020-07-15
    • 2020-06-27
    • 1970-01-01
    • 2018-03-07
    • 2021-11-17
    相关资源
    最近更新 更多