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!
Related
Here's my v-autocomplete component.
<v-autocomplete
v-model="selectedPlace"
:items="locationList"
:search-input.sync="query"
color="#e1b753"
clearable
item-text="title"
item-value="id"
label="Address"
return-object
required
close-on-content-click
class="pt-3 pb-0"
item-width="200"
:filter="v => v"
#change="setPlace()"
#blur="setPlace()"
>
<template v-slot:item="data">
<template>
<v-list-item-content>
<v-list-item-title v-html="data.item.title" />
</v-list-item-content>
</template>
</template>
</v-autocomplete>
When it's empty and the user first sets their address it works just fine but if they reload the page the autocomplete field is empty. I want to set its value according to user's information I get from the server but I can't figure out how.
What I've tried so far:
Set locationList[0] to the item I need and used auto-select-fist on autocomplete. It shows the needed location in the dropdown but doesn't display the value in the input.
Same as first but also set v-model to "locationList[0]". It displays the value in the input but doesn't let me change or clear it. When I select and remove the text it just jumps back in.
I guess auto-select-first should do the job, but it doesn't, am I trying to use it wrong?
I'm losing the text highlighting when using the slots
https://codepen.io/dhika345/pen/vYZEXNo
I've used parent.genFilteredText(item.title) but doesn't solve it. I don't know what it is actually
You can comment the item and selection slots and click the v-autocomplete box to see the difference
you have to omitted hide-selected in v-autocomplete tag and after that, you need to use the below code inside v-autocomplete tag.
code:
<template
slot="item"
slot-scope="{ parent, item, tile }"
>
<v-list-tile-content>
<v-list-tile-title
v-html="parent.genFilteredText(item.title)"
>
</v-list-tile-title>
</v-list-tile-content>
</template>
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
I have a table where in the last column there is a button that pressing it pops-up a modal with some information and actions to do.
To this modal I want to pass a value from the table (from a specific cell of each row) but the modal shows always the cell value from the last row of the table (it is like it considers the whole table as one row).
To do some test I wrote the attribute to be appeared on the button title ,and so far it works well (to each button it appears the correct attribute of each row).
It seems that in the next level (inside the modal) there is a misunderstanding and whichever modal opens it presents always the cell value of the last row.
table
modal
<b-table
sticky-header
selectable
select-mode="single"
selected-variant="success"
w-auto
show-empty
small
stacked="md"
id="eventdataTable"
striped
hover
responsive
:items="items"
:fields="event_columns"
:per-page="perPage"
:current-page="currentPage"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
:filter="filter"
:filterIncludedFields="filterOn"
#filtered="onFiltered"
>
<template v-slot:cell(nearby_venues)="row">
<div>
<b-button
variant="info"
class="text-center"
size="sm"
#click="show1 = true"
v-b-modal="'modal1'"
>Nearby Venues {{ row.item.api_id }}
</b-button>
<b-modal
id="modal1"
ok-variant="info"
v-model="show1"
size="sm"
title="Nearby Venues"
> {{ row.item.api_id }} *This appears correct*
<p align="left">Choose Venues close to</p>
<b-form-select
v-model="userdata.eventApiId"
class="mb-3"
>
<template slot="first">
<option :value="row.item.api_id">
{{ row.item.api_id }} *This appears wrong -the value of the column cell from the last row*
</option>
</template>
</b-form-select>
<label
class="mr-sm-3"
for="venue-category-selection"
></label>
<b-form-select
class="mb-2 mr-sm-2 mb-sm-0"
v-model="userdata.selectedVenueCategory"
:options="venue_categories"
value-field="id"
text-field="name"
id="venue-category-selection"
size="sm"
></b-form-select>
<hr width="300" align="left" />
<div>
<p align="left">Distance</p>
<label
class="mr-sm-3"
for="event-place-selection"
></label>
<b-form-input
v-model="userdata.distance"
placeholder="distance"
width="5px"
></b-form-input
>km.
<b-button
size="sm"
variant="success"
#click="VenuesFromSelectedEvent"
v-b-toggle.collapse-2
>
Click Here
</b-button>
</div>
</b-modal>
</div>
</template>
</table>
The problem here is that there is a loop in this component going through every row, rendering a new b-modal for each row. The problem is in this part of the code:
```
<b-form-select
v-model="userdata.eventApiId"
class="mb-3">
```
Each time a modal is rendered for a new row, it changes the userdata.eventApiId to the value for the current row. So the userdata.eventApiId will always end up being the api_id for the last row of the table.
One solution would be to change the code so that when the button is clicked, you change the userdata.eventApiId to the row.item.api_id.
I also wouldn't recommend putting the modal in the loop, as you would be creating a lot of hidden modals. I would just have one modal outside of the table that changes the value of userdata.
I have a Vue application that is using Vuetify. For some reason the v-chip component is not re-rendering when the binded value is changed.
<v-data-table>
<template v-slot:item.active="{ item }">
<v-edit-dialog :return-value.sync="item.active">
<v-chip :key="item.active" outlined :color="item.active ? 'success' : 'error'">{{ item.active ? "Open" : "Closed" }}</v-chip>
<template v-slot:input>
<v-switch
#change="saveRowField(item.id, 'active', item.active)"
v-model="item.active"
:true-value="1" :false-value="0"
color="success" label="Open"
></v-switch>
</template>
</v-edit-dialog>
</template>
</v-data-table>
The v-switch in the v-edit-dialog correctly updates the binded field item.active. However the v-chip component inside the template does not rerender on state change.
The :key attribute is binded to the same field as the v-switch.
Why is the v-chip not re-rendering when the value binded to the key is changed?
Tried your code and re-rendering content of v-chip is not an issue. What I see is chip is changed once I click v-switch but when v-edit-dialog is closed, the original value is restored.
So the problem is in v-edit-dialog. If you put large prop on it, it will display buttons - "Save" and "Cancel". If you use "Save" button, the value is saved. If "Cancel", original value is restored.
Without buttons, only way to close the dialog is clicking "away", which is interpreted as "Cancel" by v-edit-dialog and thus original value is restored...
Possible solutions:
Either let user use "Save"/"Cancel" buttons to confirm/cancel editing
Or remove :return-value.sync="item.active" (responsible for this Save/Cancel behavior).
Demo