Question

我正在尝试创建Vue应用。测试版本is here。我要解决的问题是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"}
        ]
    }
  })
})

当应用启动时，我希望报价卡数据应为2个项目的数组，并且报价vue文件的模板字段中的文本字段的值应为“ test”。相反，quotecards的长度为0，输入为空。

Answer 1

在main.js中，您将title和quotecards作为道具传递给Quote组件。但是，这些没有被定义为该组件的props。相反，您让他们定义了本地data。

在组件内，访问data和props几乎相同。例如this.title在您的JavaScript中或模板中的title。但是它们是完全不同的东西。道具从父组件传递过来，而data是内部状态，由组件本身管理。

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

无法获得数据绑定以与vue一起正常使用

1 个答案: