I have bootstrap table with columns id, name, description, author and date.
Like this: <b-table dark bordered striped hover responsive :fields="fields" :items="items" #row-clicked="$router.push({path: 'edit_category'})"></b-table>
So i whant to get id column value of selected row and put it #row-clicked="$router.push({path: 'edit_category', query:{id:here})"
This is how you can do it :
<b-table :fields="fields"
:items="items"
#row-clicked="$router.push({path: 'edit_category',query:{id:$event.id}})"
></b-table>
Related
I am trying to select multiple items in my Vuetify v-select component, but instead of showing them (in a line or using chips) I would like the text to just say 'selected'. New to Vue so not really sure where to start, but here's my code for the v-select component:
<v-select
v-else-if="isMobile"
class="customizable-dropdown"
:items="getSortedItems"
:label="$t('dropdown.label.all')"
multiple
rounded
single-line
#change="onChange"
>
</v-select>
Just use the selection slot to customize the display of the selected item...
<template v-slot:selection="{ item, index }">
<span class="pr-3">{{ item }}</span>
</template>
Demo
This question already has an answer here:
How to clear selected row in v-data-table, Vuetify
(1 answer)
Closed 2 years ago.
I have a vue app where Im using v-data table with show-select option. I want to clear only selected data using "cancel" button and Im looking for solution how to do it correctly. Already I can clear all data from table onclick.
Example on picture:
I want to clear only selected row(Ice cream sandwich)
Here is my code:
Table:
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:single-select="singleSelect"
item-key="name"
show-select
class="elevation-1"
>
<template v-slot:top>
<v-switch
v-model="singleSelect"
label="Single select"
class="pa-3"
></v-switch>
</template>
</v-data-table>
"cancel" button
<v-btn class="ma-2" color="primary" #click="cancel"> Cancel </v-btn>
script
cancel() {
this.desserts = [];
},
Use any unique property (in this example - an id) to filter the row out of your items array.
cancel(){
this.desserts = this.desserts.filter((e)=> {
return e.id !== this.selected.id;
});
}
I have a parent component and a child component (which has a vuetify table).
I am trying to make certain columns display chips from the parent component. I've run into a weird problem which I'm not sure what is the matter.
Parent Page: (Parent page is more complicated than this which is why I have taken out the table into another component so I can reuse it in combination with other stuff elsewhere)
<simple-table
v-if="!loading"
:tableData="tableData"
:loading="loading"
:headers="headers"
#search=""
:selected.sync="selected"
itemKey="groupName"
>
<template v-slot:userDatasetAccess="">
<v-chip color="red" dark>test</v-chip>
</template>
</simple-table>
When the code is like above, I can see test in a chip appearing in the UserDatasetAccessColumn
Child Page
<v-data-table
:headers="headers"
:items="tableData"
:search="search"
:loading="loading"
loading-text="Loading... Please Wait"
show-select
:item-key="itemKey"
v-model="selected"
#input="$emit('update:selected',selected)"
>
<template v-slot:[getSlot(slot)]="{ item }" v-for="(_, slot) in $slots">
<slot :item="item" :name="slot"></slot>
</template>
</v-data-table>
methods: {
getSlot(slot) {
return `item.${slot}`
}
},
However, when I change the parent to:
<template v-slot:userDatasetAccess="item">
<v-chip color="red" dark>{{item.userDatasetAccess}}</v-chip>
</template>
It no longer works.
I've console logged this.$slots and this.$scopedslots and they become empty.
So my question is: Why is it that when I do v-slot:userDatasetAccess="" vs v-slot:userDatasetAccess="item", it no longer appears as part of $slots and $scopedslots.
Is there a better way to access the columns via slots from the parent?
i try to add edit/delete button in vue bootstrap table but it's not working
<b-table
id="my-table"
responsive="sm"
:head-variant="headVariant"
:items="items"
:fields="fields"
:per-page="perPage"
:current-page="currentPage"
small
>
<template v-slot:cell(actions)="row">
<b-button>{{row}}</b-button>
</template>
</b-table>
this is the fields:
fields: ["price", "open", "high", "low", "vol", "change", "actions"],
I'm having an issue getting the checkboxes to work correctly. The checkboxes that are being rendered for each row in the "selected" slot are not binding to the correct row. When you click the checkbox, it sets the top rows' checkbox to true/false position.
Questions:
1) How to bind the true/false state of the checkbox for the row to it's row item? I'm trying to bind it to data.item.selected and then loop through the data to find the "selected" objects and perform the necessary action. I even tried adding the row object to a new data array, but it only adds the top row?
2) What would be the best way to turn all of the row checkbox's true/false based on the HEAD_selected slot checkbox?
Code:
<b-table
striped
hover
outlined
:items="schools"
:fields="fields"
:per-page="perPage"
:current-page="currentPage"
:total-rows="totalRows"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc">
<template slot="HEAD_selected" slot-scope="data">
<b-form-checkbox #click.native.stop v-model="allSelected">
</b-form-checkbox>
</template>
//Not working. data.item.selected is always the top row in all of the results, not it's current position
<template slot="selected" slot-scope="data">
<b-form-checkbox id="checkbox" #click.stop v-model="data.item.selected">
</b-form-checkbox>
</template>
</b-table>
Answer:
The issue was the id in the b-form-checkbox. id="checkbox" was binding to the same checkbox. Once I changed it to :id="'checkbox'+data.index" it worked!