时间戳

首页 > 解决方案 > v-once 在模板上渲染两次

javascript - v-once 在模板上渲染两次

问题描述

我使用它在提供有关该项目的信息的页面上显示消息，但是当我单击表格上显示的按钮（按钮显示在每一行上）时，每行中的所有按钮都被单击，因此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 代码

标签： javascripttwitter-bootstrapvue.jsvue-component

解决方案

v-once工作方式与您期望它的行为方式不同。它不仅将某些元素一次附加到 dom！相反，vue 文档说v-once，一个特定组件的模板只渲染一次：

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

但是，这不是对同一元素的重新渲染，它不会阻止将您的实现b-modal附加到 dom 多次。

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

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

在你的组件中：

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

公平地说，我没有在生活项目中对此进行过测试，但根据buefy 文档所说的，这应该会给你预期的行为。

推荐阅读