时间戳

首页 > 解决方案 > Vue2：在 v-for 循环内更改数据

for-loop - Vue2：在 v-for 循环内更改数据

问题描述

我有以下循环在画廊中显示图像：

<a href="#" v-for="(file, index) in files" v-bind:key="file.id" @click="file.selected = !file.selected">
    <img :src="file.url" />
    <span>{{file.name}}</span>
    <i v-show="file.selected" class="fa fa-check-square"></i>
</a>

我希望能够通过单击来选择任何图像。但是当我单击图像时没有任何反应。我按照在 AngularJs 中的方式进行操作——我在循环中修改了项目。

我期待： - 视图（循环内部）将被更新 - 项目的更改将被接管到数据数组（文件）中

标签： for-loopvuejs2

解决方案

好的，这很容易 - 它没有按我想要的方式工作，因为我没有在我的初始数据数组中添加一个“选择”键。在 AnguarJS 中，这无关紧要 - 只需添加键，但如果元素从一开始就不存在，则此处的元素是未知的/被监视的。

推荐阅读