Question

我是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;
}

更新：

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

我的小提琴：fiddle

要复制，请转到其他页面，然后尝试打开所有模态。有些将无法打开。

观察：

我发现从初始页面转到其他页面后，每页只能打开一个模式。

有什么更好的方法吗？还是我错过了一些琐碎的事情？

错误描述：

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

Eg：假定该列的P，Q条目为modal1类型。单击P将打开模态，而单击Q则不会。

我知道此错误似乎含糊不清，但如果有人能指出正确的方向，我将感到非常高兴。谢谢。

Answer 1

无法解释为什么会发生这种情况（可能是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>

它似乎工作正常。

希望这对您有所帮助。

单击表格元素后显示不同的弹出窗口

1 个答案: