2023鐵人賽＿Vue2基本使用規則(Day11)-列表渲染KEY的作用

2023 iThome 鐵人賽

DAY 11

自我挑戰組

Vue2 初步認識以及基本使用規則 && 了解 Vue2 的基本原理系列第 11 篇

15th鐵人賽 vue2 dom

yuchen1226

團隊大壯們的首次鐵人賽

2023-09-11 00:54:36

372 瀏覽

分享至

前言

在使用有關v-for指令的時候總會搭配:key指令
依照字面上意思,是給對應的列一個辨識方式,如同HTML標籤的id一樣
但在Vue上有更上一層樓的用途

不正當的範例

<body>
    <div id="root">
        <ul>
            <div>
                <input type="button" @click="sortTpe = 1"  value="升序" />
                <input type="button" @click="sortTpe = 2"  value="降序" />
                <input type="button" @click="sortTpe = 0"  value="原順序" />
            </div>
            <li v-for="(a, index) of animelFilter" :key="index">
                <h3>{{a.name}} - {{a.cname}} - {{a.age}} 
                    <input type="text" value="" />
                </h3>
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el : "#root",
            data : {
                sortTpe : 0,
                animel : [
                    {id : "001" , name : "dog", cname : "狗", age : 3 },
                    {id : "002" , name : "cat", cname : "貓", age : 5 },
                    {id : "003" , name : "bird", cname : "鳥", age : 1},
                    {id : "004" , name : "lion", cname : "獅子", age : 8}
                ]
            },
            computed : {
                animelFilter() {
                    var arr = Array.from(this.animel);
                    if (this.sortTpe != 0) {
                        arr.sort((val, val2)=>{
                            return this.sortTpe === 1 ?
                            val.age-val2.age : val2.age-val.age
                        })
                    }
                    return arr;
                }
            }
        })
    </script>
</body>

上面的範例中,使用列表渲染的index作為key
乍看之下符合其規則,也沒有編譯上的錯誤
但畫面上的功能又添加input輸入匡
在輸入字串後
再調整順序就會導致一個問題
數據的順序變動了,但輸入匡依然沒有變動
更新完順序的資料輸入框都要重新輸入

為什麼會有這樣的問題呢？
原因就在於key上
key的配置是由index控制的
那再調整順序後,順序不同的資料其key值也同步更改了
其相當是一個新的數據

正確寫法

<li v-for="(a, index) of animelFilter" :key="a.id">
    <h3>{{a.name}} - {{a.cname}} - {{a.age}} 
        <input type="text" value="">
    </h3>
</li>

key的配置改為唯一值的id
id跟數據是綁在一起的
在數據變換順序的時候,id的順序也跟著調動
期能達到的效果就是(不在data配置中的標籤,物件)
也能跟著聯動