v-bind: класс для значения объекта

Question

Одним из моих компонентов Vue является сетка изображений.Я хочу, чтобы пользователь мог "выбрать" изображение, нажав на него.Как только изображение было выбрано, его стиль должен измениться;если щелкнуть снова, он снова не будет выбран.

Мне нужно привязать 'image-box-selected' к определенному изображению, но я не могу этого сделать.Я не могу просто прочитать атрибут данных, потому что в противном случае все изображения будут выбраны одновременно.Поэтому вместо этого у меня есть selectedImages obj, который выступает в качестве словаря для каждого imageId (поэтому selectedImages ['qhasdk'] будет отображаться либо в false, либо в true).

Следующий фрагмент не вызывает никаких проблем, а selectedImages являетсясгенерировано и обновлено правильно.Проблема в том, что 'image-box-selected' фактически никогда не появляется, даже тогда соответствующий ключ для selectedImages был изменен на true.

Vue.component('images-grid', {
    props: ['env', 'images'],
    data: function () {
    return {
      selectedImages: {}
    }
  },
    methods: {
        getSourceUrl: function (imageId) {
            return getRootUrl() + '/image/' + this.env + '/' + imageId
        },
        updateSelectedImages: function (imageId) {
            /* First we check we populated selectedImages with the IDs. */
            if (Object.keys(this.selectedImages).length === 0) {
                for (var i = 0; i < this.images.length; i++) {
                    this.selectedImages[this.images[i].id] = false;
                }
            }
            this.selectedImages[imageId] = !this.selectedImages[imageId];
        }
    },
  template: `
        <div>
            <img
                v-for="image in images"
                v-bind:id="image.id"
                class="image-box image-box-selectable"
                v-bind:class="{'image-box-selected': selectedImages[image.id]}"
                v-bind:src="getSourceUrl(image.id)"
                v-on:click="updateSelectedImages(image.id)">
        </div>
    `
})

Answer 1

Я предпочитаю неизменный метод, присваивая this.selectedImages новому объекту:

updateSelectedImages: function (imageId) {
  /* First we check we populated selectedImages with the IDs. */
  if (Object.keys(this.selectedImages).length === 0) {
      for (var i = 0; i < this.images.length; i++) {
          this.selectedImages[this.images[i].id] = false;
      }
  }
  this.selectedImages[imageId] = !this.selectedImages[imageId];
  this.selectedImages = [...this.selectedImages] // ES6
  // this.selectedImages = JSON.parse(JSON.stringify(this.selectedImages)) // ES5
}

Answer 2

Вы не должны использовать selectedImages [image.id], чтобы получить значение, а selectedImages является объектом.Я думаю, что следует написать следующим образом

selectedImages->image.id

, если это слишком сложно, вы должны использовать «методы» для возврата значения