VueJ를 사용하여 테이블에서 행 제거s

VueJ를 사용하여 테이블에서 행 제거s

Vue에서 항목이 삭제될 때 테이블에서 행을 제거하는 방법

아래는 내가 테이블을 렌더링하는 방법이다.

<tbody>
  <tr v-for="item in items">
    <td v-text="item.name"></td>
    <td v-text="item.phone_number"></td>
    <td v-text="item.email"></td>
    <td><button @click="fireDelete(item.id)">Delete</button></td>
  </tr>
</tbody>

아래는 나의 Vue 구성 요소에서 발췌한 것이다.

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

methods: {
    fireDelete(id) {
        axios.delete('/item/'+id).then();
    }
},
mounted() {
      axios.get('/item').then(response => this.items = response.data);
    }

axios.get work and the acios.delete도 작동하지만, 앞쪽이 반응하지 않기 때문에 한 페이지 새로 고친 후에만 테이블에서 항목이 제거된다.관련 항목을 제거하려면 어떻게 해야 하는가?<tr>?

나는 그럭저럭 잘 해냈다.FireDelete 방법에 지수를 전달하고 스플라이스 기능을 사용한다.내가 원했던 그대로야

<tbody>
  <tr v-for="(item, index) in items" v-bind:index="index">
    <td v-text="item.name"></td>
    <td v-text="item.phone_number"></td>
    <td v-text="item.email"></td>
    <td><button @click="fireDelete(item.id, index)">Delete</button></td>
  </tr>
</tbody>


fireDelete(id, index) {
        axios.delete('/item/'+id).then(response => this.organisations.splice(index, 1));
      }

나도 이 문제와 같은 고민을 했다.그래서 아마 누군가가 유용하게 쓰일 것이다.

를 위해button사용:

v-if="items.length > 1" v-on:click="fireDelete(index)"

그리고fireDelete함수:

fireDelete: function (index) { 
    this.photos.splice(index, 1);
}

당신은 당신의 것을 수정하려고 할 수정이 가능하다.@click="fireDelete(item.id)"관습법에 따르다.@click='deleteData(items, item.id)'

다음과 같은 작업을 수행하십시오.

methods: {
  deleteData (items, id) {
    this.items = null // These parts may not 
    this.fireDelete(id) // match your exact code, but I hope
  }                     // you got the idea.
}

템플릿에서 수행할 수 있는 작업:

<tbody>
  <tr v-for="item in items" v-if='items'>
   <td v-text="item.name"></td>
   <td v-text="item.phone_number"></td>
   <td v-text="item.email"></td>
   <td><button @click="deleteData(item,  item.id)">Delete</button></td>
  </tr>
</tbody>

참조URL: https://stackoverflow.com/questions/42533862/removing-a-row-from-a-table-with-vuejs