Vue.js - v-show 和 v-for 不响应更改

Question

我希望在单击图像时在图库中的图像下方显示按钮。这是我的 Vue 组件的 sn-p：

<div class="col-xs-2" v-for="(data, key) in imgParsed">
    <a v-show="data != null" href='javascript:void(0);' @click.prevent="showRemove(key)">
        <img :src="data" :alt="key">
    </a>
    <div class="row" v-show="removingImage[key]">
         <div class="col-xs-6">
             <a href="javascript:void(0);" class="btn btn-danger right" value="Remove image" @click.prevent="remove(key)">Remove this image</a>
         </div>
         <div class="col-xs-6">
             <a href="javascript:void(0);" class="btn btn-success left" value="Cancel" @click.prevent="hideRemove(key)">Cancel</a>
         </div>
    </div>
</div>

1. removingImage 是一个对象，其中包含图像名称以及它们是否被点击。

   示例（在 Vue 组件中）：

   ...
   data() {
       return {
           ...
           removingImage: {
               image1: false,
               ...
               imageN: false, // They are all false by default
           }
       }
   }
   

2. showRemove(key) 应该在单击图像时显示确认和取消按钮。这是通过将removingImage[img] 设置为true 来完成的。

3. hideRemove(key) 应该在按下取消按钮时隐藏确认和取消按钮。这是通过将removing[img] 设置为false 来完成的

问题

当调用showRemove("image1") 方法时，removingImage["image1"] 的值似乎没有响应。

A.在 Vue Devtools 中，removingImage["image1"] 的值保持为 false，除非我重新点击我的组件详细信息，本质上是重新评估我的组件的状态。

B. 在showRemove 方法中，我包含了以下调试代码：

showRemove: function(img) {
    try {
        var a = this.removingImage[img]
        this.removingImage[img] = true; // This was the only thing originally there
        var b = this.removingImage[img]
        console.log('a = '+a,'b = '+b)
        if (a==b && a == false) {console.log('removingImage not updating')}
    } catch (err) {
        console.log(err)
    }
}

单击图像一次会生成a = false b = true，然后再次生成a = true b = true，这告诉我removingImage["image1"] 的值正在更新，但组件没有“看到它” ?

C. 我在模板中加入了一些小胡子（或小胡子），例如 {{removeImage[key]}}，以便我确认我的恐惧。正如我所料，无论我点击图片多少次，它总是显示this。

有什么想法吗？

编辑：我将尝试在小提琴中重现问题。

Edit(2)：fiddle，正如所承诺的（请原谅令人作呕的代码 - 我对此很陌生）

Answer 1

嗯，这很奇怪。无论如何，我通过创建一个新对象并重新分配它来让它工作..

showRemove: function (img) {
  try {
    var a = this.removingImage[img]
    this.removingImage = { ...this.removingImage, [img]: true }
    var b = this.removingImage[img]
    console.log('a = ' + a, 'b = ' + b)
    if (a == b && a == false) {
      console.log('removingImage not updating')
    }
  } catch (err) {
    console.log(err)
  }
}

Fiddle

或者

showRemove: function (img) {
  try {
    var a = this.removingImage[img]
    this.removingImage = Object.assign({}, this.removingImage, { [img]: true })
    var b = this.removingImage[img]
    console.log('a = ' + a, 'b = ' + b)
    if (a == b && a == false) {
      console.log('removingImage not updating')
    }
  } catch (err) {
    console.log(err)
  }
}

Fiddle

您也可以使用$forceUpdate ..

showRemove: function (img) {
  try {
    var a = this.removingImage[img]
    Vue.set(this.removingImage, img, true)
    var b = this.removingImage[img]
    console.log('a = ' + a, 'b = ' + b)
    if (a == b && a == false) {
      console.log('removingImage not updating')
    }
    this.$forceUpdate()
  } catch (err) {
    console.log(err)
  }
}

Fiddle

Answer 2

使用

Vue.set()

https://vuejs.org/v2/guide/reactivity.html

例子：

Vue.set(this.removingImage, img, true)