Home > Web Front-end > Vue.js > body text

How to solve vue $index error reporting problem

藏色散人
Release: 2023-01-13 00:45:03
Original
3136 people have browsed it

vue $index reports an error because vue has removed the original usage of $index and $key and changed it to index and key. The solution is to modify $index and $key to index and key.

How to solve vue $index error reporting problem

The operating environment of this tutorial: Windows 7 system, Vue.js v2.5.16 version, Dell G3 computer.

Recommended related articles: vue.js

Vue.js v1.0.21 uses $index and $key in the vue loop array.

Vue of Vue.js v2.5.16 reports the following error when using $index and $key when looping data, looping json object data and arr array.

How to solve vue $index error reporting problem

The result is that vue has removed the original $index and $key usage and changed them to index and key.

You need to pay attention here to the order of value, key, index, which must be in this order.

The code is as follows:

 <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">
    <!-- 对象  : (值 , 键 , 序号), 顺序是固定的 -->
    <h2>json数据类型</h2>
    <ul v-for = "(value, key, index) in json">
        <li> {{value}} ~ {{key}} ~ {{index}}</li>
    </ul>
    <!-- 数组 : (值 ,序号 ), 顺序是固定的 -->
    <h2>arr数组类型</h2>
    <ul v-for = "(value, index) in arr">
        <li>{{value}} ~ {{index}}</li>
    </ul>
</div>
Copy after login

The above is the detailed content of How to solve vue $index error reporting problem. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
vue
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template