为什么 vue v-for 在数据更改时不重新渲染子组件？

Question

parent

export default {
  name: "App",
  components: {ChildComponent},
  data: function() {
    return {
      itemList: []
    };
  },
  methods: {
    fetchData() {
      callApi().then(res => { this.itemList= res; })
    }
  }
};

<template>
      <ol>
        <template v-for="(item) in itemList">
          <li :key="item.id">
            <child-component :item="item"></card>
          </li>
        </template>
      </ol>
</template>

child

export default {
  name: "ChildComponent",
  props: {
    item: { type: Object }
  },
  data: function() {
    const {
      name,
      address,
      .......
    } = this.item;
    return {
      name,
      address,
      ......
    };
  },
};
</script>

child get the item props which is an object.

I'm confused why the itemList point to another array, but the child doesn't update?

is it because key doesnt change? (but other data changed..)

thanks

Answer 1

It is because of this part of your code:

const {
  name,
  address,
} = this.item;
return {
  name,
  address,
};

What it does it copies name and address from item and return them. It happens only once in your code while component is created. If after that your prop item change, your data doesn't copy it and still returns the first values.

Solution: If you don't change name or address in a child component, just use a prop

this.item.name in a script or {{ item.name }} in a template

It is already reactive so your component will update when prop changes.

Answer 2

It is because the data function is called only once on the creation of the component.

The recommended way to get data that depend on other data is to use computed .

export default {
  name: "ChildComponent",
  props: {
    item: { type: Object }
  },
  computed: {
    name() {
      return this.item.name;
    },
    address() {
      return this.item.address;
    }
  }
};

https://v2.vuejs.org/v2/guide/computed.html#Basic-Example

Answer 3

Not sure what you do in your child component but this is enough to do and should react to your parent component changes. Basically the idea is to use the prop. I made some tweaks also.

export default {
  name: "App",
  components: {ChildComponent},
  data: function() {
    return {
      itemList: []
    };
  },
  methods: {
    fetchData() {
      callApi().then(res => { this.itemList= res; })
    }
  }
};

<template>
      <ol>
        <li v-for="(item) of itemList" :key="item.id">
          <card :item="item"></card>
        </li>
      </ol>
</template>


export default {
  name: "ChildComponent",
  props: {
    item: { 
      type: Object,
      required: true
    }
  }
};
</script>

<template>
  <div>
    {{ item.name }} {{ item.address }}
  </di>
</template>