Question

我使用它来显示提供有关该项目信息的页面上的消息，但是当我单击表格上显示的按钮（每行显示按钮）时，每行中的所有按钮都被点击，因此它使b-modal连续多次显示每个按钮。我已添加v-once但仍然b-modal呈现两次或与桌面上的按钮一样多。

这是我的HTML，

  <template slot="action" slot-scope="data">
     <b-btn v-b-modal.modal2 variant="primary">View</b-btn>

      <b-modal v-once id="modal2" size="lg" title="View Surat">
        <p class="my-2">View Surat</p>
      </b-modal>
  </template>

我的完整.vue code

Answer 1

v-once的工作方式与您预期的行为方式不同。 它不仅会向dom追加一些元素！ b-modal所做的只是渲染一个特殊组件的模板一次，tasks说：

在随后的重新渲染中，元素/组件及其所有子元素将被视为静态内容并跳过。这可以用来优化更新性能。

然而，这并不是对同一元素的重新渲染，也不会阻止<template slot="action" slot-scope="data"> <b-btn @click="openModal" variant="primary">View</b-btn> <b-modal :active.sync="isOpen" size="lg" title="View Surat"> <p class="my-2">View Surat</p> </b-modal> </template>的实现被追加到dom多次。

我建议的一种可能的解决方法是使用父组件数据中的变量来确定模态是否已打开并使用按钮上的方法触发它，如下所示：

data() {
   return {
     // your other data
     isOpen: false
   }
},
methods: {
  openModal () {
    this.isOpen = true
   }
}

在你的组件中：

{{1}}

公平地说，我还没有在一个人生项目中对此进行过测试，但从vue documentation所说的，这应该会给你预期的行为。

v-once在模板上呈现两次

1 个答案: