Vuejs2 替换对象数组vuejs
我需要用vuejs替换对象的反应数组， 我从Api Restful中检索数据，然后监听对象是否有更改 例如，我得到了一个状态为（在线、离线、忙碌）的用户列表，如果用户更改其状态，我需要更新已渲染的对象 我找到的解决方案是查找并删除对象，然后推送新数据，但在这种情况下，我丢失了DOM中元素的顺序，因为新数据被追加到最后：Vuejs2 替换对象数组vuejs,vuejs2,vue-component,Vuejs2,Vue Component,我需要用vuejs替换对象的反应数组， 我从Api Restful中检索数据，然后监听对象是否有更改 例如，我得到了一个状态为（在线、离线、忙碌）的用户列表，如果用户更改其状态，我需要更新已渲染的对象 我找到的解决方案是查找并删除对象，然后推送新数据，但在这种情况下，我丢失了DOM中元素的顺序，因为新数据被追加到最后： <template> <section> <div v-for="expert in experts" :key="expe
<template>
<section>
<div v-for="expert in experts" :key="expert.id">
<div class="spinner" :class="expert.status"></div>
</div>
</section>
</template>
<script>
import axios from 'axios'
export default {
name: 'experts',
data: () => ({
experts: [],
errors: []
}),
// Fetches posts when the component is created.
created() {
axios.get(`http://siteapi.co/api/v1/users`)
.then(response => {
// JSON responses are automatically parsed.
this.experts = response.data.data
})
.catch(e => {
this.errors.push(e)
})
},
mounted() {
this.listen();
},
methods: {
listen: function() {
var self = this
//Listen if there is a status change
this.pusher.subscribe('expert-front', channel => {
channel.bind('edit', (data) => {
//Fid the object and deleted
self.experts = self.experts.filter(function (item) {
return item.id != data.id;
});
self.experts.push(data)
});
});
}
}
}
</script>
从“axios”导入axios
导出默认值{
姓名:"专家",，
数据：（）=>({
专家：[]，
错误：[]
}),
//创建组件时获取帖子。
创建（）{
axios.get(`http://siteapi.co/api/v1/users`)
。然后（响应=>{
//JSON响应会自动解析。
this.experts=response.data.data
})
.catch（e=>{
此.errors.push（e）
})
},
安装的（）{
这个；
},
方法：{
听：函数（）{
var self=这个
//如果状态发生变化，请收听
this.pusher.subscribe（'expert-front'，channel=>{
channel.bind（'编辑'，（数据）=>{
//Fid对象并将其删除
self.experts=self.experts.filter（函数（项）{
return item.id！=data.id；
});
self.experts.push（数据）
});
});
}
}
}
listen: function() {
var self = this
this.pusher.subscribe('expert-front', channel => {
channel.bind('edit', (data) => {
//Find the index of the item chag
let index = self.experts.findIndex((expert) => expert.id === data.id)
self.experts = [
...self.experts.slice(0, index - 1),
data,
...self.experts.slice(index + 1)
]
});
});
}
我希望这有帮助 您可以执行以下操作，而不是过滤和推送数据：
listen: function() {
var self = this
this.pusher.subscribe('expert-front', channel => {
channel.bind('edit', (data) => {
//Find the index of the item chag
let index = self.experts.findIndex((expert) => expert.id === data.id)
self.experts = [
...self.experts.slice(0, index - 1),
data,
...self.experts.slice(index + 1)
]
});
});
}
我希望这有帮助 在删除专家索引之前，可以使用for循环将其存储在专家数组中。然后，只需使用
self.experts.splice（index，0，data）self.experts.splice（index，0，data）……