Vue.js 从数组中弹出一个嵌套对象答案

【问题标题】：Vue.js pop a nested object from an arrayVue.js 从数组中弹出一个嵌套对象
【发布时间】：2019-08-24 07:39:34
【问题描述】：

在快速仪表板上工作，我想从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}'””

【问题讨论】：

您好，能否提供您已经尝试过的示例？否则看起来您是在试图让人们为您编写代码。

标签： javascript arrays vue.js multidimensional-array

【解决方案1】：

由于 vue.js 数据对象只是简单的 javascript 对象，所以应该可以使用 array.pop()。

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

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

此函数将从列表中删除部门，并将其返回。

【讨论】：

谢谢，原来是这个想法。这将不起作用，因为 this.departments_by_dept_emp 不存在，因为我存储 axios 调用的结果，就像 data () { return { results: [] } }
啊，我明白了，您介意在问题中包含 axios 调用的代码，以便我们提供更好的答案吗？

【解决方案2】：

冒着看起来像是为你写一些代码的风险......

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

这将从数组中删除对象并保持其余部分不变。

【讨论】：

【解决方案3】：

如果你只想显示数组中的一个元素，你可以传递元素的索引来显示

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>

希望这对你有用。

【讨论】：