Javascript Vue.js从数组中弹出嵌套对象

在一个快速仪表板上工作，我想通过\u dept\u emp从

departments\u中删除第二个对象。使用Vue如何才能最好地实现这一点

HTML

获取数据的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}
，因为vue.js数据对象只是javascript对象，所以应该可以使用array.pop（）

您应该能够将这样的函数添加到方法块中：

popDept: function() {
   return this.departments_by_dept_emp.pop();
},

此函数将从列表中删除该部门，并将其返回。
可能看起来像在为您编写代码

Vue是一个javascript框架，因此您可以使用纯javascript编写函数来查找数组中的项，然后将其删除。因此，在您迭代
department.dept\u name
的模板中，您可以添加一个单击侦听器，
@click=“removelement（department.dept\u 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)
}

这将从数组中删除对象，其余部分保持原样。
如果只想显示数组中的元素，可以传递要显示的元素的索引


var-app=新的Vue({
el:“#应用程序”，
数据：{
结果:[{
“环境管理计划编号”：10010，
“出生日期”：“1963-06-01”，
“名字”：“Duangkaew”，
“姓氏”：“皮维多”，
“性别”：“F”，
“雇用日期”：“1989-08-24”，
“部门由部门管理计划管理”：[
{
“部门编号”：“d004”，
“部门名称”：“生产”
},
{
“部门编号”：“d006”，
“部门名称”：“质量管理”
}
]
}]
}
})

{{result.first_name}{{result.last_name}}
{{result.departments\u by\u dept\u emp[0]。dept\u name}
{{result.hire_date}
{{result.birth_date}
您好，能否提供您已经尝试过的示例？否则，看起来您是在试图让人们为您编写代码。谢谢，这是最初的想法。这不会像
这样起作用。我存储axios调用结果的方式不存在部门emp
>data（）{return{results:[]}

Ah我明白了，您是否介意在问题中包含axios调用的代码，以便我们提供更好的答案？

popDept: function() {
   return this.departments_by_dept_emp.pop();
},

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