Vue组件收到数据后如何更新

Posted 2023-02-22

【中文标题】Vue组件收到数据后如何更新

【英文标题】：How to update Vue component after it receives data

【发布时间】：2020-01-23 13:36:05

【问题描述】：

安装组件后，我会在页面上获取数据。然后，我希望每次用户登录时都能看到我的组件更新（为此我监听此事件）。现在，我从数据库中获取数据，并在 div“ip”中获得了登录用户。但我打算将这些新数据动态添加到我已经收到的数据中。如何动态更新数据？我想在不刷新页面的情况下使用新插入的用户获取页面。此登录用户出现在此处，并且仅在我刷新页面时才被添加。我想在不需要刷新页面的情况下获得它。这是关于使用新道具重新渲染组件。

在模板中

<div v-for="user in users">
    <div class="card-header"> user.ip </div>
    <div class="card-header"> user.name </div>
</div>
<div v-html="ip"></div>

在脚本中

export default 
    data() 
        return 
            users: [],
            ip: ''
        
    ,
    mounted() 
        window.Echo.channel('channelName')
            .listen('eventIp', (e) => 
                this.ip = e
            ),
            this.fetchData()
    ,
    methods: 
        fetchData() 
            axios
                .get('api/person')
                .then(response => (this.users = response.data))
                .catch(error => console.log(error));
        
    

【问题讨论】：

console.log(e); 在this.ip=e 之前，输出是什么？

@Caddy DZ 它将我发布的数据显示为一个对象（'name' 和 'ip'）。

然后使用e来更新你的数据而不是使用Ajax，Echo的目的是在动态变化时广播新数据

【参考方案1】：

如果 eventIp 只是一个 ip：

<div v-for="user in users">
    <div class="card-header"> user.ip </div>
    <div class="card-header"> user.name </div>
    <div v-if="ip==user.ip">online</div>
</div>

如果eventIp包含多个在线ip：

<div v-for="user in users">
    <div class="card-header"> user.ip </div>
    <div class="card-header"> user.name </div>
    <div v-for"userIp in ip">
      <span v-if="userIp==user.ip">online</span>
    </div>
</div>

更新： 正如您在 cmets 中解释的那样，您需要收听频道。这个链接https://pusher.com/tutorials/todo-vue-laravel#building-vue-components 是一个很好的教程部分。

当新用户创建时，您需要更多新用户在频道中的数据并将其添加到用户变量中。自动vue渲染成html。

【讨论】：

我想在不刷新页面的情况下获取新插入用户的页面。此登录用户出现在这里 并且仅在我刷新页面时才添加到 中。我想在不需要刷新页面的情况下获得它。我知道 React 有一些方法可以解决这个问题。这是关于使用新道具重新渲染组件。