Vue.js - v-show и v-for, не отвечающие на изменения

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>

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"] остается ложным, если я не щелкну повторно по деталям моего компонента, по существу, повторно оценивая статусмой компонент.

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]}}, чтобы я мог подтвердить свои страхи.Как я и ожидал, независимо от того, сколько раз я нажимал на изображение, оно всегда показывало бы это .

Любые идеи?

Редактировать: я попытаюсь воспроизвестипроблема в скрипке.

Редактировать (2): скрипка , как и было обещано (извините за отвратительный код - я очень новичок в этом)

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

Скрипка

В качестве альтернативы вы можете использовать $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)
  }
}

Скрипка

Answer 2

Использование

Vue.set()

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

Пример:

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