VueJS 在 EventBus 接收到新数据后重新渲染组件

Question

每次事件总线接收到新数据时，都会调用计算得到的 function。 如何重新渲染组件，以便显示新数据？

<template lang="pug">
  div
    div(v-for='user in filtered')
      p {{ user.name }}
</template>

<script>
  computed: {
    filtered() {
      // filter by using data
      return this.users.filter((user) =>
        return this.data.includes(user.name)
      );
    }
  },
  created() {
    EventBus.$on('data', (data) => {
      this.data = data;
    }
  },
  data() {
    return {
      data: [],
      users: [
        // users
      ]
    }
  }
</script>

Answer 1

为了检测是否需要渲染， Vue 检查对象和 arrays 的引用，而不是它们的值或属性。

我怀疑从事件总线传递的data数组与组件中的数据数组相同。

使用扩展运算符创建一个新数组并触发重新渲染：

created() {
  EventBus.$on('data', (data) => {
    this.data = [...data];
  }
},