vue $index報(bào)錯怎么辦

小編給大家分享一下vue $index報(bào)錯怎么辦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

vue $index報(bào)錯是因?yàn)関ue已經(jīng)移除了原來的$index和$key用法，變成了index和key，其解決辦法就是修改$index和$key為index和key即可。

Vue.js v1.0.21的vue循環(huán)數(shù)組當(dāng)中的使用的是$index 和 $key。

Vue.js v2.5.16 的 vue 在循環(huán)數(shù)據(jù)時(shí)，循環(huán) json 對象數(shù)據(jù) 和 arr 數(shù)組 的時(shí)候，用 $index 和 $key報(bào)如下錯誤。

結(jié)果是因?yàn)関ue 已經(jīng)移除了原來的$index 和 $key 用法, 變成了 index 和 key。

這里需要注意一下 value， key，index 的順序， 必須是要按照這樣的順序。

代碼如下：

 <script>
    window.onload = function () {
        new Vue({
            el : "#app",
            data : {
                arr : ["apple", "pear", "banana", "watermelon", "strawberry"],
                json: {"a": "apple", "b":"pear", "c": "banana", "d": "watermelon"}
            },
            methods : {
                add : function () {
                    this.arr.push("pear");
                }
            }
        });
    }
</script>
<div id = "app">
    <!-- 對象  ： （值 ， 鍵 ， 序號）, 順序是固定的 -->
    <h3>json數(shù)據(jù)類型</h3>
    <ul v-for = "(value, key, index) in json">
        <li> {{value}} ~ {{key}} ~ {{index}}</li>
    </ul>
    <!-- 數(shù)組 ： （值 ，序號 ）， 順序是固定的 -->
    <h3>arr數(shù)組類型</h3>
    <ul v-for = "(value, index) in arr">
        <li>{{value}} ~ {{index}}</li>
    </ul>
</div>

以上是“vue $index報(bào)錯怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！