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

Question

我正在将一个站点从 jquery 迁移到 vue js，虽然总的来说它比 jquery 版本更干净、更简单，但我遇到了一些 Vue js 似乎不容易解决的障碍。

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

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

               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，这应该切换了“活动”类。它似乎只工作一次，即只用于一个元素并且只会切换一次。我看到数据发生了变化，但没有应用 css。

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

相反，我目前必须使用 jQUery 并在 click 事件上调用一个 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 中使用了 timeblocks[1] 而不仅仅是 timeblocks。这似乎是它中断的原因，但我不清楚为什么？

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

有任何想法吗？

标签： jqueryvue.jsv-for

Answer 1

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

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

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