Question

我的Vue组件之一是图像网格。我希望用户能够通过单击它来“选择”图像。选择图像后，其样式应会改变；如果再次单击，它将再次被取消选择。

我需要将“选择的图像框”绑定到特定图像，但是我没有这样做。我不能简单地读取数据属性，因为否则将同时选择所有图像。因此，相反，我有一个selectedImages obj，它为每个imageId充当字典（因此selectedImages ['qhasdk']将映射为false或true）。

以下代码段没有引起任何问题，并且selectedImages已生成并正确更新。问题在于，即使“ selectedImages”的相关键已更改为true，“ image-box-selected”也不会真正出现。

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

您不应使用selectedImages [image.id]来获取值，并且selectedImages是一个对象。我认为应该写如下

selectedImages->image.id

如果过于复杂，则应使用“方法”返回值

Answer 2

我更喜欢不可变的方法，将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
}

v-bind：class到一个对象值

2 个答案: