不能在Vue js中为列表错误或限制赋值类吗？
我正在将一个站点从jquery迁移到vue js，虽然总体上它比jquery版本更干净、更简单，但我遇到了一些Vue js似乎不容易解决的障碍。
我遇到的一个具体问题是，我生成了一个很长的ui元素列表。单击这些元素应该会切换元素颜色。在jquery中，这只是在这些元素上出现的类上放置一个侦听器，然后在该元素上切换一个“活动”类。
在Vue中它不是那么简单……我使用v-for来构建列表，并且必须创建一个包含对象列表的数组，这些对象列表定义了我需要存储在这些elements...something上的数据，如下所示……
this.timeblocks = [];
for (var j = 1; j < 25; j++) {
var id = 'iam'+ i + '_'+ j + '';
var block = {id: id, val: false,zone:'mid', time: this.getTime(j) + ' AM'};
this.timeblocks.push(block);
}我现在根据这个数据对象生成列表，如下所示：
<a class="mid" v-for="(obj, index) in timeblocks" :id="obj.id" :data-value="obj.time" :class="{'active':obj.val}" @click="toggleTime(obj,$event)"></a> 我本以为我可以像下面这样创建一个单击事件
@click="obj.val = !obj.val"这会将对象的值从false切换到true，这应该会切换到“active”类。它似乎工作，但只有一次，即只有一个元素，并将只切换一次。我看到数据在变化，但是css没有被应用。
有人知道这是什么原因吗？
取而代之的是，我目前不得不使用jQUery，并在单击事件上调用toggleTime方法，如下所示：
toggleTime: function(obj,event) {
console.log('Toggle time:',obj);
//obj.val = !obj.val;
$("#" + event.currentTarget.id).toggleClass('active');
},我真的不想使用jquery，我想知道为什么Vue在这种情况下不能工作。
如果有任何指导或意见，我们将不胜感激。谢谢!
更新
下面选择的答案有效。但我想指出，这个问题是我在原始问题中遗漏的。
我实际上使用时间块作为数组的数组，填充如下：
this.timeblocks = [];
for (var i = 1; i < 8; i++) {
this.timeblocks[i] = [];
for (var j = 1; j < 25; j++) {
var id = 'iam'+ i + '_'+ j + '';
var block = {id: id, val: false,zone:'mid', time: this.getTime(j) + ' AM'};
this.timeblocks[i].push(block);
}
for (var j = 1; j < 25; j++) {
var block = {};
var id = 'ipm'+ i + '_'+ j + '';
var block = {id: id, val: false, zone:'noon', time: this.getTime(j) + ' PM'};
this.timeblocks[i].push(block);
}
}当我引用其中一个时(如下所示)是当它不工作时。除非我实现了来自Luis的nextTick修复(见上)
<a class="mid" :id="obj.id" v-for="(obj, index) in timeblocks[1]" :data-value="obj.time" :class="{'active':obj.val}" @click="clicktime(obj)">{{obj.id}}</a>请注意，我在v-for中使用了timeblocks1，而不仅仅是时间块。这似乎是它坏掉的原因，但我不清楚为什么？
查看此处https://codepen.io/anon/pen/WyQmMM?editors=1011
有什么想法吗？
回答 1
Stack Overflow用户
发布于 2018-06-01 06:53:33
尝试在单击方法中呈现列表视图(更新
<a v-show="this.showList" ...></a>
updateUI() {
this.$nextTick(() => {
this.showList = false;
this.$nextTick(() => {
this.showList = true;
});
});
}https://stackoverflow.com/questions/50632872
复制相似问题