Today, I have a question that is quite general and simple, so I don't have any specific code to share. The basic steps involved are:
- Firstly, pass an array as a prop to a child component.
- Next, within the child component, iterate over the array using v-for.
- After that, I make an axios post request to update the "user-list" (which is the array). However, Vue doesn't update this array because a prop is not reactive. So, my main query is: How can I use computed properties as passed down props to ensure the array updates in real-time?
Although I don't have much code to show, here's a snippet:
<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 = []));
}
The axios post method 'kickuser' removes a user from the database, which in turn reduces the array by one user. I'm hoping someone can assist me with incorporating computed properties.