计数器将值增加 100 倍 vuejs答案

【问题标题】：the counter increases the value 100 times vuejs计数器将值增加 100 倍 vuejs
【发布时间】：2019-11-16 02:49:09
【问题描述】：

我最近开始学习 wuejs。有一个任务是从 api 获取数据，将其添加到数组中，并通过 v-for 显示具有 date 属性的块。但我有以下输出

ДИЕТА 600

dfhgsdfghdfgh 601

fghdfghdfghd 602

dfghdfghdfgh 603

dfghdfghdfghdfgh 604

dftghdfghdfghdfghfgh 605

（右值计数器）

C将数组大小增加1计数器增加100，也就是说，如果你在每一行旁边的数组中添加一个元素，则从700开始的值将是

控制台： [Vue 警告]：组件渲染函数中可能存在无限更新循环。

（在中找到）

我见过@的一种方式，但是 Razor 的语法让我很困扰，我不知道如何连接它们。也许这不是问题。帮助

html

<div id="axiostest">
        <div v-for="item in message"  :data-testid="counter">
            <p class="text-danger">{{ item }} {{ counter++}}</p>
        </div>
    </div>

vuejs

var axios = new Vue({
            el: '#axiostest',
            data: {
                message: [],
                counter: 0
            },
            methods: {

            },
            mounted() {
                axios
                    .get('/Profile/GetLastChallenge', {
                        params: {
                            userEmail: '@User.Identity.Name'
                        }
                    })
                    .then(response => (this.message = response.data));
            }
        });

【问题讨论】：

渲染触发器counter++触发器渲染触发器counter++触发器渲染触发器等等。 v-for="(item, index) in message" 也可以这样做
是的，问题出在你的{{ counter++ }} 上，如果你想显示计数器加1 试试{{ counter + 1}} 这不会触发渲染。对于一个好的和安全的代码，每次你使用 v-for 循环某些东西时，使用一个 key 指令，这样 VueJs 就不会在循环中迷失自己，比如：<div v-for="(item, i) in message" :data-testid="counter" :key="item"> <p class="text-danger">{{ item }} {{ counter + 1 }}</p> </div>

标签： javascript c# vue.js asp.net-core

【解决方案1】：

如果你只需要输出数组，你可以使用这个：

<div id="axiostest">
    <div v-for="(item, index) in message"  :data-testid="index">
        <p class="text-danger">{{ item }} {{ index }}</p>
    </div>
</div>

你可以用 index^ {{index + 1}}、{{index * 2 }} 等做你想做的事情

而且，正如 Estradiaz 所说，您会收到警告，因为 counter++ 发生重新渲染

【讨论】：