在快速仪表盘上工作,我想从 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)
})
}
所以从这个例子来看,基本上我只想要生产部门名称并从我的表中删除质量管理。我不相信 slice() 会成功,因为它只会克隆一个维度。此外,任何类似 splice() 或 findIndex 的东西我都会收到错误“无法读取未定义的属性‘{example}’””
最佳答案
如果只想显示数组中的元素,可以传递要显示的元素的索引
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>
希望这对你有用。
关于javascript - Vue.js 从数组中弹出一个嵌套对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55483915/