[Day14] 迴圈 (v-for) 進階(2)

第 12 屆 iThome 鐵人賽

DAY 14

Modern Web

少年學Vue，如隙中窺月系列第 14 篇

12th鐵人賽

Leo

2020-09-28 21:40:22

750 瀏覽

分享至

不能運行的狀況

設定陣列長度為０

在 js 中我們可以將某個陣列長度設定為０來將這個陣列的值消失，如範例的 dataArray2 ，但是在 Vue 中這種寫法是不行執行的，我們今天透過一個 noWork 方法去將陣列的長度設定為 0，並且在 console 上印出我們修改的陣列，會發現雖然最後陣列裡面的元素變成 0 ，但是畫面上 li 標籤所渲染的陣列資料卻沒有改變。

<body>
    <div id='app'>
        <ul>
            <li v-for='item in dataArray1'>{{item}}</li>
        </ul>
        <button @click='noWork'>更改陣列長度</button>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            dataArray1:[1,2,3,4]
        },
        methods: {
            noWork:function(){
                this.dataArray1.length = 0;
                console.log(this.dataArray1.length);
            }
        }
    })
    var dataArray2 = [1,2,3,4]
    dataArray2.length = 0;
</script>

透過索引值新增陣列值

在 js 中我們可以透過指定陣列的索引值來新增或修改我們想要值，但是這個方法在 Vue 中無法運行，當我們使用一個方法 noWork 在索引值4的地方新增值5，並將陣列值顯示在consolo上，此時我們會發現，雖然陣列的確多了一筆值為5的資料，但是畫面上的 li 標籤卻沒有渲染出5出來。如果我們想要在 Vue 中透過指定索引值的方式來修改陣列值的話，我們可以使用 Vue 內建的 set 方法來達成。set 方法裡面有三個參數值，target 代表是我們要修改的目標陣列， index 代表目標陣列裡面我們要修改或是新增的索引值，最後 value 則是我們指定的值。透過這個方法我們可以更新陣列資料並且讓畫面也渲染出新的陣列資料。

<body>
    <div id='app'>
        <ul>
            <li v-for='item in dataArray1'>{{item}}</li>
        </ul>
        <button @click='noWork'>插值方法1</button>
        <button @click='set'>插入方法2</button>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            dataArray1:[1,2,3,4]
        },
        methods: {
            noWork:function(){
                this.dataArray1[4]=5;
                console.log(this.dataArray1);
            },
            set:function(){
                Vue.set(this.dataArray1,4,5);//set(target,index,value)
                console.log(this.dataArray1);
            }
        }
    })
</script>