使用 vuetify 的无限循环答案

【问题标题】：Endless Loop using vuetify使用 vuetify 的无限循环
【发布时间】：2021-12-19 15:39:21
【问题描述】：

Heyjo 各位程序员，希望你们周末有个好的开始。

我的 Vue2（使用 Vuetify 6.14.15）代码有问题。我正在使用来自我的商店的数据，在那里我创建了卡片来显示可购买的物品。我想添加一个删除按钮，使用这个 v-vialog 和一个 v-for 删除文章

<div class="mt-16">
  <v-list
  flat
  >
    <div
      v-for="(card, index) in $store.state.cards"
      :key="index"
    >
      <v-list-item>
        <template>
          <v-list-item-action>
            <v-btn 
              icon
            >
            <v-icon>mdi-pencil</v-icon>
            </v-btn>
          </v-list-item-action>

          <v-list-item-content>
            <v-list-item-title>{{ card.name }}</v-list-item-title>
          </v-list-item-content>
            <v-list-item-action>
              <v-btn 
                icon
                @click="dialogDelete = true"
              >
              <v-icon color="red darken-1">mdi-delete</v-icon>
              </v-btn>
            </v-list-item-action>
        </template>
      </v-list-item>
      <v-divider></v-divider>
      <v-dialog
        v-model="dialogDelete"
        max-width="300"
      >
        <v-card>
          <v-card-title class="text-h5">
            sure to delete?
          </v-card-title>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="error"
              text
              @click="dialogDelete = false"
            >
              no
            </v-btn>
            <v-btn
              color="error"
              text
              @click="deleteArticle(index)"
            >
              yes, delete
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-list>
</div>

我在 Chrome 和 Firefox 中遇到的错误是“Uncaught RangeError: Maximum call stack size exceeded”所以我想我在这里创建了一个无限循环，但我不知道在哪里。

感谢任何形式的帮助，在此先感谢您

【问题讨论】：

这是一个 JavaScript 错误，主要是由递归调用相同的函数引起的。在控制台中查看哪些函数调用填充了调用堆栈，并找到对该函数的任何引用，这些引用可能导致递归调用。 v-for 与此类错误无关。
当我将 v-dialog 放在包含我的 v-for 的 die div 之外时，它确实有效，所以它必须是循环还是我错了？
我是新手。我在哪里可以找到控制台上的调用堆栈？我这样尝试过：developer.mozilla.org/en-US/docs/Tools/Debugger/… 但我不知道在哪里暂停调试器，所以它显示了正确的调用堆栈

标签： vue.js vuetify.js infinite-loop v-for

【解决方案1】：

您应该将v-dialog 置于v-for 循环之外。请参阅 GitHub 上的 issue。当单击删除按钮并打开对话框之前（将它们放在方法中而不是内联单击操作中），您可以将 selected-id-to-be-deleted 存储在组件数据中，例如selectedId。然后在对话框关闭或删除操作成功时清除它，由您决定。

【讨论】：