CODEWITHSUNDEEP
javascripthtmlvue.js
buzzysin
buzzysin

Reputation: 331

Vue.js - v-show and v-for not responding to changes

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)

Upvotes: 2

Views: 3579

Answers (2)

edwardbrosens
edwardbrosens

Reputation: 112

Use

Vue.set()

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

Example:

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

Upvotes: 0

Husam Elbashir
Husam Elbashir

Reputation: 7177

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

Upvotes: 1

Related Questions