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

Posted 2023-02-22

【中文标题】Vue.js 从数组中弹出一个嵌套对象

【英文标题】：Vue.js pop a nested object from an array

【发布时间】：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'””

【问题讨论】：

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

【参考方案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>

希望这对你有用。