Vue 组件收到数据后如何更新 [英] How to update Vue component after it receives data

问题描述

安装组件后，我会在我的页面上获取数据.然后，我希望每次用户登录时都能看到我的组件更新(为此我监听了这个事件).现在，我从 DB 获取数据，并在 div "ip" 中登录了用户.但是我打算将这些新数据动态添加到我已经收到的数据中.如何动态更新数据?我想在不刷新页面的情况下获取带有新插入用户的页面.这个登录的用户出现在这里，只有当我刷新页面时才会被添加.我想在不需要刷新页面的情况下获得它.这是关于使用新道具重新渲染组件.

在模板中

<div class="card-header">{{ user.ip }}</div><div class="card-header">{{ user.name }}</div>
<div v-html="ip"></div>

在脚本中

出口默认{数据() {返回 {用户:[],ip: ''}},安装(){window.Echo.channel('channelName').listen('eventIp', (e) => {this.ip = e}),this.fetchData()},方法: {取数据(){公理.get('api/人').then(response => (this.users = response.data)).catch(error => console.log(error));}}}

解决方案

如果 eventIp 只是一个 ip:

<div class="card-header">{{ user.ip }}</div><div class="card-header">{{ user.name }}</div><div v-if="ip==user.ip">在线</div>

如果 eventIp 包含多个在线 ip:

<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">在线</span>

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

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

When a component is mounted, I get data on my page. Then, I would like to see my component updates every time the user logged in(for this purpose I listen for this event). For now, I get data from DB and in the div "ip" I got logged in user. But I intend to dynamically add this new data to my already received data. How can I update data dynamically? I would like to get the page with a newly inserted user without refreshing the page. This logged in user appears here and gets added to only if I refresh the page. I want to get it without the need of refreshing the page. It's about rerendering component with new props.

In template

<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>

In script

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));
        }
    }
}

解决方案

if eventIp is just one 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>

if eventIp includes multi online 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>

updated: as you explain in comments you need to listen channel. this link https://pusher.com/tutorials/todo-vue-laravel#building-vue-components is good section of a tutorial for this.

when new user created you need more data of new user in channel and add it to users variable. automatically vue render it in html.

这篇关于Vue 组件收到数据后如何更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！