Я очень новичок в 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
Чтобы воспроизвести, перейдите на другую страницу и попробуйте открыть все модалы.Некоторые не открываются.
Наблюдение:
Я вижу, что могу открыть только один модал на страницу после перехода на другую страницу с начальной страницы.
Есть ли лучший способ сделать это?Или я упускаю что-то тривиальное?
Описание ошибки:
Я сталкиваюсь со странным поведением в моем коде, когда большинство строк (кажется мне случайным) не работаютНе открывать всплывающее окно при нажатии кнопки. Это происходит даже для одного и того же модального типа
Например: предположим, что P, Q записей столбца имеют тип modal1.Нажатие на P открывает модальное, а нажатие на Q - нет.
Я знаю, что эта ошибка кажется расплывчатой, но я буду очень рад, если кто-нибудь укажет мне правильное направление.Спасибо.