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

Question

Working on a quick dashboard and I want to remove the second Object from departments_by_dept_emp . How would this be best achievable with 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 call getting the data is stored in an empty array

data () {
    return {
      results: [],
    }
}

Axios call

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

So from the example, essentially I only want the Production department name and remove Quality Management from my table. I do not believe slice() will do the trick as it will only clone one dimension. Also, anything like splice() or findIndex I receive the error "Cannot read property '{example}' of undefined""

Answer 1

If you only want to display an element from an array you can pass the index of the element to display

 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>

Hope this works for you.

Answer 2

Since vue.js data objects are simply javascript objects, it should be possible to use array.pop().

You should be able to add a function like this to your methods block:

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

This function will both remove the department from the list, and return it.

Answer 3

At risk of looking like writing some code for you...

Vue is a javascript framework so you can write functions in plain javascript to find an item in an array and then remove it. So in your template where you iterate through department.dept_name you could add a click listener, @click="removeElement(department.dept_name)"

Then in your script section:

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

That will remove the object from the array and leave the rest as is.