Vue.js从数组中弹出嵌套对象
Vue.js从数组中弹出嵌套对象
提问于 2019-04-03 05:36:59
在一个快速仪表板上工作，我想从departments_by_dept_emp中删除第二个对象。如何通过Vue最好地实现这一点？
HTML
<tbody id="rows" v-for="result in results">
<tr>
<td>{{ result.first_name }} {{ result.last_name }}</td>
<td v-for="department in result.departments_by_dept_emp">{{ department.dept_name }}</td>
<td>{{ result.hire_date }}</td>
<td>{{ result.birth_date }}</td>
</tr>
</tbody>JavaScript
{
"emp_no": 10010,
"birth_date": "1963-06-01",
"first_name": "Duangkaew",
"last_name": "Piveteau",
"gender": "F",
"hire_date": "1989-08-24",
"departments_by_dept_emp": [
{
"dept_no": "d004",
"dept_name": "Production"
},
{
"dept_no": "d006",
"dept_name": "Quality Management"
}
]
}获取数据的Axios调用存储在一个空数组中
data () {
return {
results: [],
}
}Axios调用
getData() {
this.loading = true
axios.get('https://url', { 'headers': { 'Api-Key': '' } })
.then(response => {
this.results = response.data.resource
this.next = response.data.meta.next
this.loading = false
console.log(response.data.resource)
})
.catch(error => {
console.log(error)
})
}因此，从这个示例中，基本上我只想要生产部门的名称，并从我的表中删除Quality Management。我不相信slice()能做到这一点，因为它只会克隆一个维度。此外，任何像splice()或findIndex这样的东西都会收到错误"Cannot read property '{example}‘of undefined"“
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-04-03 06:14:07
如果只想显示数组中的元素，可以传递要显示的元素的索引
var app = new Vue({
el: '#app',
data: {
results: [{
"emp_no": 10010,
"birth_date": "1963-06-01",
"first_name": "Duangkaew",
"last_name": "Piveteau",
"gender": "F",
"hire_date": "1989-08-24",
"departments_by_dept_emp": [
{
"dept_no": "d004",
"dept_name": "Production"
},
{
"dept_no": "d006",
"dept_name": "Quality Management"
}
]
}]
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<tbody id="rows" >
<tr v-for="result in results">
<td>{{ result.first_name }} {{ result.last_name }}</td>
<td>{{ result.departments_by_dept_emp[0].dept_name }}</td>
<td>{{ result.hire_date }}</td>
<td>{{ result.birth_date }}</td>
</tr>
</tbody>
</table>
</div>
希望这对你有用。
Stack Overflow用户
发布于 2019-04-03 06:00:54
由于javascript数据对象只是vue.js对象，因此应该可以使用array.pop()。
您应该能够将这样的函数添加到您的方法块中：
popDept: function() {
return this.departments_by_dept_emp.pop();
},此函数将从列表中删除部门，并返回该部门。
Stack Overflow用户
发布于 2019-04-03 06:03:38
冒着看起来像是为你写代码的风险...
Vue是一个javascript框架，所以你可以用纯javascript编写函数来查找数组中的项，然后将其删除。因此，在遍历department.dept_name的模板中，可以添加单击侦听器@click="removeElement(department.dept_name)"
然后在您的脚本部分中：
export default {
data: () => ({
results: {
"emp_no": 10010,
"birth_date": "1963-06-01",
"first_name": "Duangkaew",
"last_name": "Piveteau",
"gender": "F",
"hire_date": "1989-08-24",
"departments_by_dept_emp": [
{
"dept_no": "d004",
"dept_name": "Production"
},
{
"dept_no": "d006",
"dept_name": "Quality Management"
}
]
}
}),
methods: {
removeElement(x) {
var ind = this.results.departments_by_dept_emp.findIndex(n => n.dept_name === x)
this.results.departments_by_dept_emp.splice(ind, 1)
}这将从数组中删除对象，并保持其余部分不变。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55483915
复制相关文章
相似问题
腾讯云开发者
