Question

我最近开始学习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));
            }
        });

Answer 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 ++会重新呈现

计数器将值增加100倍vuejs

1 个答案: