Vue.js - v-show 和 v-for 不响应更改 [英] Vue.js - v-show and v-for not responding to changes

问题描述

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

<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="移除图片"@click.prevent="remove(key)">移除这张图片</a>
<div class="col-xs-6"><a href="javascript:void(0);"class="btn btn-success left" value="取消"@click.prevent="hideRemove(key)">取消</a>

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

   示例(在 Vue 组件中):

   <代码>...数据() {返回 {...移除图片:{图 1:假，...imageN: false,//默认都是false}}}

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) {尝试 {var a = this.removingImage[img]this.removingImage[img] = true;//这是原来唯一的东西var b = this.removingImage[img]console.log('a = '+a,'b = '+b)if (a==b && a == false) {console.log('removingImage not updates')}} 抓住(错误){控制台日志(错误)}}

点击图像一次产生a = false b = true，再次给出a = true b = true，这告诉我的值removeImage["image1"] 正在更新，但组件没有看到"?

C. 我在模板中加入了一些小胡子(或小胡子)，就像 {{removeImage[key]}} 这样我可以确认我的恐惧.正如我所料，无论我点击图像多少次，它总是显示 这个.

有什么想法吗?

我将尝试在小提琴中重现该问题.

Edit(2):fiddle，正如承诺的那样(原谅令人作呕的代码 - 我是对此非常陌生)

解决方案

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

showRemove: 函数 (img) {尝试 {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 不更新')}} 抓住(错误){控制台日志(错误)}}

小提琴

或

showRemove: 函数 (img) {尝试 {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 不更新')}} 抓住(错误){控制台日志(错误)}}

小提琴

或者你可以使用 $forceUpdate ..

showRemove: 函数 (img) {尝试 {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 不更新')}this.$forceUpdate()} 抓住(错误){控制台日志(错误)}}

小提琴

I would like buttons to show underneath an image in a gallery when the image is clicked. Here is a snippet of my Vue component:

<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 is an object containing the image name(s) and whether they have been clicked or not.

   Example (in Vue component):

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

2. showRemove(key) is supposed to show the confirm and cancel buttons when the image is clicked. This is done by setting removingImage[img] to true.

3. hideRemove(key) is supposed to hide the confirm and cancel buttons when the cancel button is pressed. This is done by setting removing[img] to false

The problem

When the method showRemove("image1"), is called, the value of removingImage["image1"] doesn't seem to respond.

A. In the Vue Devtools, the value of removingImage["image1"] stays false, unless I re-click on my component details, essentially re-evaluating the status of my component.

B. In the showRemove method, I included the following debugging code:

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

Clicking the image once yields a = false b = true, and once again gives a = true b = true, which tells me that the value of removingImage["image1"] is updating, but the component isn't 'seeing it'?

C. I included some moustaches (or mustaches) within the template like so {{removeImage[key]}} so that I could confirm my fears. As I expected, no matter how many times I clicked on the image, it would always show this.

Any ideas?

Edit: I will try and reproduce the problem in a fiddle.

Edit(2): The fiddle, as promised (excuse the disgusting code - I am so very new to this)

解决方案

Hmmm this is strange. Anyway I got it to work by creating a fresh object and reassigning it ..

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

Or

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

Alternatively you can use $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

这篇关于Vue.js - v-show 和 v-for 不响应更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！