Блог

Работаю над быстрой панелью мониторинга, и я хочу удалить второй объект из 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}’ из undefined»»

Если вы хотите отобразить только элемент из массива, вы можете передать индекс элемента для отображения

 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>  

Надеюсь, у вас это сработает.

Поскольку vue.js объекты данных — это просто объекты javascript, должна быть возможность использовать array.pop().

Вы должны быть в состоянии добавить подобную функцию в свой блок методов:

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

Эта функция как удалит отдел из списка, так и вернет его.

Рискуя выглядеть так, будто пишу какой-то код для вас…

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

Это удалит объект из массива и оставит остальное как есть.