在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ v-for="(item, index) in list"循

v-for="(item, index) in list"循環(huán)子組件,刪除第n個(gè)組件后,其后的組件會(huì)更新,無(wú)法保持狀態(tài)

更新嘗試如下:
父組件:

<template>
  <div>
    <div style="height: 45px;"></div>
    <div v-for="(item, index) in list" :key="item.key">
      <child :key="item.key" :value="item" :key="index"></child>
      <div @click="deleteOne(index)">delete</div>
      <div style="height: 40px"></div>
    </div>
  </div>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    },
    data () {
      return {
        list: [
          {val: 111, key: 1},
          {val: 222, key: 2},
          {val: 333, key: 3},
          {val: 444, key: 4},
          {val: 555, key: 5}]
      }
    },
    methods: {
      deleteOne (index) {
        this.list.splice(index, 1)
      }
    }
  }
</script>
<style scoped>
</style>

子組件:
<template>
<div>

{{value}} + {{random}}

</div>
</template>
<script>

export default {
  props: ['value'],
  data () {
    return {
      random: Math.random()
    }
  }
}

</script>
<style scoped>
</style>
測(cè)試結(jié)果如下:
初始為:
圖片描述

刪除3后:
圖片描述

發(fā)現(xiàn)刪除3后 組件1 2 沒(méi)有更新,但是 4 5 更新了。
補(bǔ)充問(wèn)題:有沒(méi)有辦法保持4 5 的狀態(tài)呢?
—————————————————————————————————————————————————
原問(wèn)題:
父組件通過(guò)remove函數(shù)list.splice(n, 1),刪除了一個(gè)子組件,input被刪除的是第n個(gè),但子組件不是第n個(gè)而是最后一個(gè),請(qǐng)問(wèn)怎么做才能實(shí)現(xiàn)傳刪除第n個(gè)子組件呢?

父組件:

<div v-for="(item, index) in list">
 <input type="text" v-model="item.data">
 <child :options="item.option"></child>
 <div @click="remove(index)">delete</div>
</div>
data () {
 return {
  list: [
   {data:'123', option: {...}},
   {data:'456', option: {...}},
   {data:'789', option: {...}}
  ]
 }
}
methods: {
 remove(n) {
   list.splice(n, 1)
 }
}

子組件:

<div>...</div>

回答
編輯回答
擱淺

為每個(gè)子組件加上key試一下

2017年8月18日 17:28
編輯回答
局外人

為每個(gè)組件上加獨(dú)一無(wú)二的key,注意此處如果以list的每項(xiàng)的index作為key值可能會(huì)出現(xiàn)組件銷毀的錯(cuò)誤。推薦 lodash 的 uniqueId()。

2018年6月30日 09:48
編輯回答
祈歡

你目前放上的代碼沒(méi)問(wèn)題,list是簡(jiǎn)寫(xiě)了吧 this.list
list.splice(2,1)的時(shí)候是刪除下標(biāo)2整項(xiàng)都刪除,不會(huì)出現(xiàn)2這一項(xiàng)里子對(duì)象有的刪除錯(cuò)誤

2018年5月20日 01:59
編輯回答
愚念
v-if = "key == n"
2017年5月14日 10:39