Question

<template>
    <topView viewInfo="cardInfo"></topView>
    <bottomView viewInfo="cardInfo"></bottomView>
<template>
<script>
     module.exports = {
        data: {
          viewInfo:{
             attr0:value0,
             attr1:value1
          }
       },
       mounted:function(){
          getDataFromServer();
       },
       methods:{
          getDataFromServer:function(){
            var me = this;
            var httpRequest = Service.getViewInfo();
            httpRequest.on("success",function(data){
               me.viewInfo.attr2 = data.info.attr2;
               me.viewInfo.attr3 = data.info.attr3;
               me.viewInfo.attr4 = data.info.attr4;

           });
           httpRequest.send();
      }
    }
  }
</script>

topView.vue

<template>
<div>
  <text>{viewInfo.attr0}</text>
  <div v-for="(item, index) in getItems">
        <text>{item.text}</text>
        <text>{item.info}</text>
  </div>
  <text>{viewInfo.attr1}</text>
</div>
<template>

<script>
 module.exports = {
    data: {
      itemInfo:[
          {text:'text 0',info:"****"},
          {text:'text 1',info:"****"},
          {text:'text 2',info:"****"}
      ]
    },
    props:{
        viewInfo:{}
    },
    computed:{
      getItems:function(){
        this.itemInfo[0].info = this.viewInfo.attr2 +" point";
        this.itemInfo[1].info = this.viewInfo.attr3 +" point";
        this.itemInfo[2].info = this.viewInfo.attr4 +" point";

        return itemInfo;
      }
    },
    methods:{

       }
    }
</script>

当我从服务器获取数据并向viewInfo添加一些attr值时。子组件可以更新直接值。计算值不能更新与父组件的道具数据的关系。

需要一些帮助。当我更新父组件的“ viewInfo”值时，如何更新计算项目值。

Answer 1

当您直接使用索引设置项目时，Vue无法检测到更改，即this.itemInfo[0].info = this.viewInfo.attr2 +" point" 没有反应。

对于上述内容，请改用Vue.set

// create a new item
var newItem = Object.assign({}, this.itemInfo[0], { info: this.viewInfo.attr2 +" point" })
// set the new item to the specific index
this.$set(this.itemInfo, 0, newItem)

您可以阅读有关List Rendering Caveats here的更多信息：

weex数据更改以更新为子组件

1 个答案: