问题

Question

我希望单击图片时在图库中图片下方显示按钮。这是我的Vue组件的一个片段：

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

removingImage是一个包含图像名称以及是否已单击图像名称的对象。

示例（在Vue组件中）：

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

showRemove(key)应该在单击图像时显示确认和取消按钮。这是通过将removingImage[img]设置为true来完成的。
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)

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

问题

2 个答案: