无法在 Vue js 中为列表分配 class - 错误或限制？

Question

我正在将网站从 jquery 迁移到 vue js，虽然总的来说它最终比 jquery 版本更干净、更简单，但我遇到了一些似乎没有的障碍被Vue js轻松解决

我遇到的一个具体问题是我正在生成一长串 ui 元素。单击这些元素应切换元素颜色。在 jquery 中，这只是将侦听器放在出现在这些元素上的 class 上，然后在元素上切换 'active' class。

在 Vue 中就没那么简单了.... 我正在使用 v-for 来 build 列表并且必须创建一个数组来保存对象列表，这些对象定义了我需要存储在这些元素上的数据......类似于以下内容......

               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' class。它似乎只工作一次，即只对一个元素有效，并且只会切换一次。我看到数据在变化，但没有应用 css。

有人知道是什么原因造成的吗？

相反，我目前必须使用 jQUery 并在点击事件上调用 toggleTime 方法，如下所示：

   toggleTime: function(obj,event) {
        console.log('Toggle time:',obj);
        //obj.val = !obj.val;
        $("#" + event.currentTarget.id).toggleClass('active');
    },

我真的不想使用 jquery 并且想了解为什么 Vue 在这种情况下不起作用。

欢迎任何 gui舞蹈或评论。谢谢！

更新

下面选择的答案有效。但我想指出这个问题是我在原始问题中遗漏的。

我实际上将时间块用作数组的数组，填充如下：

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 中使用了时间块[1]，而不仅仅是时间块。这似乎是它崩溃的原因，但我不清楚为什么？

看这里 https://codepen.io/anon/pen/WyQmMM?editors=1011

有什么想法吗？

Answer 1

尝试在您的点击方法中呈现您的列表视图（更新）

<a v-show="this.showList" ...></a>

updateUI() {
  this.$nextTick(() => {
    this.showList = false;
    this.$nextTick(() => {
      this.showList = true;
    });
  });
}

无法在 Vue js 中为列表分配 class - 错误或限制？

Cant assign class in Vue js for list - bug or limitation?

jquery

vue.js

v-for