时间戳

首页 > 解决方案 > 单击表格元素时显示不同的弹出窗口

vue.js - 单击表格元素时显示不同的弹出窗口

问题描述

我对 VueJS 很陌生。我正在尝试填充表格。其中一列是单击打开模式的按钮。可以有 3 种不同类型的模态。我尝试解决这样的问题：

我在这个参考代码之后链接了我的 jsfiddle。

HTML

 <div id="app">

  <!-- Main table element -->
  <b-table striped hover :items="items" :fields="fields" >
    <template slot="name" slot-scope="item">
      {{item.value.first}} {{item.value.last}}
    </template>
    <template slot="isActive" slot-scope="item">
      {{item.value?'Yes :)':'No :('}}
    </template>
    <template slot="actions" slot-scope="item">
      <div v-if="item.item.age < 15">
        <b-btn v-b-modal.modal1 size="sm" @click="details(item.item)">Details</b-btn>
      </div>
      <div v-else-if="item.item.age > 26">
        <b-btn v-b-modal.modal2 size="sm"           @click="details(item.item)">Details</b-btn>        
      </div>
      <div v-else>
        <b-btn v-b-modal.modal3 size="sm"           @click="details(item.item)">Details</b-btn>
      </div>

    </template>
  </b-table>

  <b-modal id="modal1">
    modal 1
  </b-modal>

    <b-modal id="modal2">
    modal 2
  </b-modal>
  <b-modal id="modal3">
    modal3
  </b-modal>
</div>

VueJS

new Vue({
  el: '#app',
  data: {
    items: [{
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }
    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }

    }, {
      isActive: false,
      age: 9,
      state: 'success',
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }

    }, {
      isActive: false,
      age: 89,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }

    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }

    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }

    }, {
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }

    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }

    }, {
      isActive: false,
      age: 26,
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }

    }, {
      isActive: false,
      age: 22,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }

    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }

    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }

    }],
    fields: {
      name: {
        label: 'Person Full name',
        sortable: true
      },
      age: {
        label: 'Person age',
        sortable: true
      },
      isActive: {
        label: 'is Active'
      },
      actions: {
        label: 'Actions'
      }
    }
  },
  methods: {
    details(item) {
      //gets some data. Write 3 different functions to fetch data accordingly 
    }
  }
})

风格：

#app {
  padding: 20px;
  height: 500px;
}

更新：

添加分页后，我能够复制下面描述的错误。

我的小提琴：小提琴

要复制，请转到其他页面并尝试打开所有模式。有些不会打开。

观察：

我发现在从初始页面更改到不同页面后，我每页只能打开一个模式。

有没有更好的方法来做到这一点？还是我错过了一些微不足道的东西？

错误描述：

我在我的代码中遇到了一个奇怪的行为，其中大多数行（对我来说似乎是随机的）在单击按钮时没有打开弹出窗口。即使对于相同的模式类型也会发生这种情况

例如：假设列的 P、Q 条目的类型为 modal1。单击 P 会打开一个模态，而单击 Q 则不会。

我知道这个错误似乎很模糊，但如果有人能指出我正确的方向，我会很高兴。谢谢。

标签： vue.jsbootstrap-vue

解决方案

无法解释为什么会发生这种情况（可能是 bootstrap-vue 的错误）。无论如何，如果你更换：

<b-btn v-b-modal.modal1 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal2 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal3 size="sm" @click="details(item.item)">Details</b-btn>

和：

<b-btn v-b-modal="'modal1'" size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal2'" size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal3'" size="sm" @click="details(item.item)">Details</b-btn>

它似乎工作正常。

希望这对您有所帮助。

推荐阅读