axios回调中的Vue实时更新道具数组

Question

这次它是一般而简单的，所以我没有真正提供代码。 一般步骤是：

• 将数组作为道具传递给子组件
• 在子组件内部使用 v-for 遍历数组
• 现在我调用 axios 发布方法来修改“用户列表”（用户列表是数组）vue 现在应该更新这个数组，但它不会因为道具不是反应性的。 主要问题是：我如何使用计算属性作为传递的道具来实时更新数组？

这里有一些代码：

       <div class="users" v-for="participant in part" :key="participant.id">
          <template v-if="participant.name !== username">
            {{participant.name}}
            <span>
              <a style="cursor:pointer" title="kick" @click="kickUser(participant)">

...

  props: ["participants", "username", "channel"],

  methods: {
kickUser(user) {
  axios
    .post("/kickuser", { user: user, channel: this.channel })
    // .then((this.participants = []));
}

kickuser axios post 方法从数据库中删除了一个用户，因此该数组被用户踢了，希望你能帮助我计算属性

Answer 1

在这里做一些假设，所以我可能需要在信息曝光时对其进行编辑......

您有一个包含数据的父组件。 例如

data: () => ({ participants: [...] }),

然后将该数据传递给子组件

<Child :participants="participants" 
       :username="..." :channel="..."/>

在该子组件中，您执行涉及发出 HTTP 请求的操作。

---

然后你要做的是从子组件发出一个事件

methods: {
  async kickUser (user) {
    let { data } = await axios.post('/kickuser', { user, channel: this.channel })
    this.$emit('kick', data)
  }
}

并在父级中监听此事件

<Child :participants="participants" @kick="handleKick"
       :username="..." :channel="..."/>

// parent "methods"
methods: {
  handleKick (data) {
    this.participants = [] // or whatever you need to do
  }
}

这个过程在 Vue 的文档中有所概述 ~ 单向数据流