代码之家 › 专栏 › 技术社区 › Tarasovych

Vue.js-v-表示指标混淆?

vue.js

Tarasovych · 技术社区 · 6 年前

:组件结构

<Games> // using v-for - iterate all games
--<Game> // using v-for - iterate all players
----<Player 1>
------<DeleteWithConfirmation>
----<Player 2>
------<DeleteWithConfirmation>
----<Player 3>
------<DeleteWithConfirmation>
----...

<DeleteWithConfirmation>

<template>
    <div>
        <button @click="incrementDelete"
                v-html="deleteButtonHTML"></button>
        <button v-if="deleteCounter === 1" @click="stopDeleting">
            <i class="undo icon"></i>
        </button>
    </div>
</template>

<script>
  export default {
    name: 'DeleteWithConfirmation',
    data() {
      return {
        deleteCounter: 0
      }
    },
    computed: {
      deleteButtonHTML: function () {
        if (this.deleteCounter === 0)
          return '<i class="trash icon"></i>'
        else
          return 'Are you sure?'
      }
    },
    methods: {
      incrementDelete() {
        this.deleteCounter++
        if (this.deleteCounter === 2) {
          //tell parent component that deleting is confirmed.
          //Parent call AJAX than.
          this.$emit('deletingConfirmed')
          this.stopDeleting()
        }
        else if (this.deleteCounter > 2)
          this.stopDeleting()
      },
      stopDeleting() {
        Object.assign(this.$data, this.$options.data())
      }
    }
  }
</script>

我的问题

在删除第四个玩家之前,他在“你确定状态吗”( deleteCounter === 1 deleteCounter === 0 ). 似乎第三个组件状态尚未更新其 deleteCounter ,但是它的数据(玩家的名字已经更新了)。

删除成功后 <Games>

2 回复 | 直到 6 年前

ssc-hrep3 6 年前

您不需要删除计数器来实现这一点。相反,它使您的代码很难理解。只需使用如下布尔值:

<template>
    <div>
        <button @click="clickButton"
            <template v-if="confirmation">
                <i class="trash icon"></i>
            </template>
            <template v-else>
                Are you sure?
            </template>
        </button>
        <button v-if="confirmation" @click="confirmation = false">
            <i class="undo icon"></i>
        </button>
    </div>
</template>

<script>
  export default {
    name: 'DeleteWithConfirmation',
    data() {
      return {
        confirmation: false
      }
    },
    methods: {
      clickButton() {
        if (!this.confirmation) {
            this.confirmation = true;
        } else {
            this.$emit('deleting-confirmed');
        }
    }
}
</script>

<div class="row" v-if="showButton">
    [...]
    <delete-with-confirmation @deleting-confirmed="showButton = false">
</div>

Tarasovych 6 年前

其中一个答案被删除了,我希望我能提到最初的作者,但我不记得他的用户名,所以(更改了一点):

  incrementDelete() {
    if (this.deleteCounter === 1) { // 1 because there is "post-increment" at the end of the fucntion
      this.deletingProgress = true
      this.$emit('deletingConfirmed')
      this.stopDeleting()
    }
    else if (this.deleteCounter > 1) // 1 because there is "post-increment" at the end of the fucntion
      this.stopDeleting()
    this.deleteCounter++ // "post-increment"
  },

ssc-hrep3 答案比我的方法更简洁(更轻巧), link