首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue.js从数组中弹出嵌套对象

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

Stack Overflow用户
提问于 2019-04-03 05:36:59
回答 3查看 160关注 0票数 1

在一个快速仪表板上工作,我想从departments_by_dept_emp中删除第二个对象。如何通过Vue最好地实现这一点?

HTML

代码语言:javascript
复制
<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

代码语言: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调用存储在一个空数组中

代码语言:javascript
复制
data () {
    return {
      results: [],
    }
}

Axios调用

代码语言:javascript
复制
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"“

EN

Stack Overflow用户

回答已采纳

发布于 2019-04-03 06:14:07

如果只想显示数组中的元素,可以传递要显示的元素的索引

代码语言:javascript
复制
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"
        }
      ]
    }]
  }
})
代码语言:javascript
复制
<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>

希望这对你有用。

票数 1
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55483915

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档