时间戳

首页 > 解决方案 > 无法让数据绑定与 vue 一起正常工作

vuejs2 - 无法让数据绑定与 vue 一起正常工作

问题描述

我正在尝试创建一个 vue 应用程序。测试版在这里。我正在处理的问题是 main.js 中的 vue 构造函数需要设置 Quote 对象的属性，但不是。

Quote vue 文件有这个。

import card from './components/Card.vue'
import quoteheader from './components/QuoteHeader.vue'

export default{
  data: function(){
    return {
      title: "",
      quotecards: []
    }
  },
    methods: {
        addCard : function(obj){
            this.quotecards.push(
        {
          id: this.quotecards.length + 1,
          title: obj.title
        }
      );
      //console.log(this.quotecards);
        },
    updateCriteria(tmp){
      ///console.log(tmp);
    }
    },
  components: {
    card, quoteheader
  }
}

启动它的 main.js 有这个。

new Vue({
  el: "#app",
  render: h => h(Quote, {
    props: {
      title: "test",
        quotecards: [
            { id: 0, title: "title 1"},
            { id: 1, title: "title 2"}
        ]
    }
  })
})

当应用程序启动时，我希望quotecards 数据应该是一个包含 2 个项目的数组，并且quote vue 文件的模板字段中的文本字段应该具有“test”的值。相反，quotecards 长度为 0，输入为空。

标签： vuejs2vue-component

解决方案

在main.js你传递title和quotecards作为Quote组件的道具。但是，这些并未props针对该组件进行定义。相反，您已经让他们定义了一个 local data。

在一个组件中，访问data和props是相同的。例如this.title，在您的 JavaScript 中或仅title在模板中。然而，它们是非常不同的东西。Props 是从父组件传入的，而data内部状态是由组件本身管理的。

通常，组件应该只对其拥有的数据进行更改。所以制作quotecards一个道具会导致其他问题，因为你在Quote. 处理此问题的首选方法是发出事件以通知quotecards需要更改的父级。父母如何做到这一点将取决于具体情况。如果该值存储data在父级上，则它是该数据的所有者，并且可以自行对其进行变异。

推荐阅读