V-один раз отображается на шаблоне - PullRequest
Новая
       13

V-один раз отображается на шаблоне

0 голосов
/ 12 июня 2018

Я использую это, чтобы показать сообщение на странице, которая предоставляет информацию об этом элементе, но когда я нажал кнопку, которая отображалась в таблице (кнопка показана в каждой строке), все кнопки в каждой строке нажимаются, так чтоделает 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 код

1 Ответ

0 голосов
/ 12 июня 2018

v-once работает не так, как вы ожидаете. Он не только добавляет один элемент в dom! Вместо этого v-once визуализирует шаблон отдельного компонента, vue документация гласит:

При последующем повторном рендеринге элемент / компонент и все его дочерние элементы будут обрабатываться как статическое содержимое и пропускаются.Это можно использовать для оптимизации производительности обновления.

Однако это не повторный рендеринг того же элемента, и это не мешает реализации вашего 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 документации , это должно дать вам ожидаемоеповедение.

...