Vue.js：從v中刪除元素時添加「_delete」元素

我有一些元素，通過v-for指令顯示。每個元素都有「刪除」按鈕。當我點擊它時，我使用state.items.splice(payload.id, 1);代碼從數組中刪除元素。我還需要一個隱藏的輸入，它會告訴服務器該元素已被銷燬。在Ruby on Rails的是Vue.js：從v中刪除元素時添加「_delete」元素

<input type="hidden" name="order[line_items_attributes][<ID>][_delete]" value="1" />

我怎樣才能增加這個要素？

來源

2017-03-04 Roman Yarygin

你能解釋一下多一點，爲什麼你需要隱藏的輸入，它將如何幫助？ – Saurabh

後端應用程序正在Ruby on Rails上運行。它對嵌套的表單元素有特殊的行爲。我正在編輯的主要形式是針對Shop order模型。訂單在購物車中有許多物品。項目是嵌套模型。並且爲了從購物車中移除一些物品，我需要在該物品的請求中發送「_destroy」屬性。但如何做到這一點，如果關於項目的任何信息從狀態中刪除？ –

你可以在你正在做'state.items.splice（payload.id，1）;'的地方做到這一點。如果不適合，請添加更多相關的代碼。 – Saurabh

我不知道我是否理解你的問題，但這裏是我的反應。

假設你有下面的模板：

<ul> 
    <li v-for="item in items"> 
     {{ item.name }} <a href="#" @click.prevent="deleteItem(item)">Delete</a> 
    </li> 
</ul>

正如你所看到的，你可以使用一個deleteItem()方法，你必須定義到組件：

export default { 
    data() { 
     return { 
      items: [ 
       { 
        id: 1, 
        name: 'First Item' 
       }, 
       { 
        id: 2, 
        name: 'Second Item' 
       } 
      ] 
     } 
    }, 
    methods: { 
     deleteItem (item) { 
      this.$http({ 
       url: '/api/items/' + item.id, 
       method: 'delete' 
      }).then(response => { 
       // Do something here if you want 
      }, response => { 
       // Or here if you want to handle an error 
      }) 

      let index = this.items.indexOf(item) 
      this.items.splice(index, 1); 
     } 

    } 
}

來源

2017-03-05 00:11:01 Hammerbot

Vue.js：從v中刪除元素時添加「_delete」元素

回答

相關問題