Не можете назначить класс в Vue JS для списка - ошибка или ограничение? - PullRequest
Новая
       9

Не можете назначить класс в Vue JS для списка - ошибка или ограничение?

0 голосов
/ 01 июня 2018

Я перевожу сайт с jquery на vue js, и, хотя в целом он оказывается намного чище и проще, чем версия jquery, я сталкиваюсь с некоторыми препятствиями, которые Vue js кажется не так легко решить.

Конкретная проблема, с которой я сталкиваюсь, заключается в том, что я генерирую длинный список элементов пользовательского интерфейса.Нажатие на эти элементы должно изменить цвет элемента.В 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);
               }

IТеперь сгенерируйте список на основе этого объекта данных следующим образом: 

<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"

Это привело бы к переключениюзначение объекта от ложного до истинного, которое должно было бы переключить «активный» класс.Кажется, что это работает, но только один раз, то есть только для одного элемента и будет переключаться только один разЯ вижу, что данные изменяются, но css не применяется.

Кто-нибудь знает, что вызывает это?

Вместо этого мне в настоящее время приходится использовать jQUery и вызывать метод toggleTime для события click, котороевыглядит следующим образом: 

   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);

                }
            }

Когда я ссылаюсь на один из них (как показано ниже), это когда он не работает.Если я не реализую исправление nextTick от Luis (см. Выше) 

  <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>

Обратите внимание, что я использую временные блоки [1] в v-for, а не только временные.Кажется, это причина его поломки, но мне непонятно, почему?

Смотрите здесь https://codepen.io/anon/pen/WyQmMM?editors=1011

Есть идеи?

1 Ответ

0 голосов
/ 01 июня 2018

Попробуйте отобразить ваш список (обновить), используя метод щелчка 

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

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