Question

我想要什么：

页面加载后，我得到了从DB提取的数据。然后，由于我加入了状态通道（“聊天”），因此我希望看到新用户名显示在页面上所有先前获取的用户下方。

我得到的是

我收到警告[Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。然后当我重新加载页面时，我看到来自DB（已提取用户）的数据，然后它消失并且立即显示最后一个数据（user.name）。问题是如何防止这种情况发生？

Component.vue

  <tr v-for="user in users"> 
            <td>{{user.name}}</td>
            <td>{{user.ip}}</td>
  </tr>     

<script>
name:'Online',
     data() {
        return {
            users:[],  
            user: ''    
       }    
   },   

 mounted() {
        window.Echo.channel('channelName')
            .listen('eventIp', (e) => {
                this.user = e;    
            });
          window.Echo.join('chat')
            .here(users => (this.users = users))
            .joining(user => (this.users.push(user)))
            .leaving(user => (this.users = this.users.filter(u => (u.id 
                                                !==user.id)))
        );    
    this.fetchData()
   },

methods: {
     fetchData(){
              axios
                .get('api/person')
                .then(response => (this.users= response.data))
                .catch(error => console.log(error));
     },
   }
 }
</script>

如果页面重新加载后数据消失，如何更新组件？

0 个答案: