How do I clear the cache item list for auto complete ? I am using the cache-items flag. Once The user has the results for the current query and want to try a new list, I need the current items to be cleared.
I have "cache-items" on so the user can see all his selections before submitting.
<v-autocomplete v-if="showautocomplete" v-model="autocomplete_model"
:items="items" :loading="isLoading" autofocus
:search-input.sync="autocomplete_search" chips clearable hide-selected cache-items>
I don't know if you still need this but I think I've found an answer here: https://github.com/vuetifyjs/vuetify/issues/11365 from bka9.
You can add a ref on your v-autocomplete and change the cachedItems through the $refs. I'm not sure when you would have to trigger the method but that's all that's missing.
<template>
<v-autocomplete ref="autocomplete" cache-items ... />
</template>
<script>
methods: {
clearCachedItems() {
this.$refs.autocomplete.cachedItems = [];
},
},
</script>
Related
I have creating a list of users want to add them tags. I am using a data-table to display them and a combo box using chips to add or remove tags. How can I pass the user information to the method called when I add / remove a tag? Here is my code:
<v-data-table :headers="headers" :items="usersInfos" :search="search" :items-per-page="-1">
<template v-slot:[`item.tags`]="{ item }">
<v-combobox v-model="item.tags" :items="roles" chips clearable label="Rôles" multiple>
<template v-slot:selection="{ attrs, item, select, selected }">
<v-chip
v-bind="attrs"
:input-value="selected"
close
#click="select"
#click:close="removeRole(item)"
>
{{ item }} <!-- the tag -->
</v-chip>
</template>
</v-combobox>
</template>
</v-data-table>
Don't know if I understood it correctly but you can do following pass your item with your click event to your methods - call the function and use the passed parameter there.
in your template
#click=getSelectedItem(usersInfos)
in your script
methods: {
getSelectedItem(usersInfos) {
//do code here
console.log(usersInfos)
}
}
and than you have to use this where you have written your child element:
<child :usersInfo="usersInfo">
and in your child.vue you have to set props in your script like this:
props: ["usersInfo"]
I use Vuetify but disabled the import of all icons since treeshaking wasn't working properly in Nuxt, instead I followed the advice and import them manually as stated in this thread: vuetifyjs: Adding only used icons to build
However, this means that a lot of components that require icons, e.g v-checkbox, v-select or v-combobox (which uses v-checkbox in their dropdown menus) need their icons added manually. Just using v-checkbox allows for :on-icon & :off-icon props to be used but I can't figure out how I'd reach them when the checkboxes are used by other components.
I've been attempting to change the behaviour in both v-select and v-combobox.
This is as far as I got but clearly this doesn't add the checked icon, just the blank one.
<v-combobox outlined multiple chips v-model="select" :items="items">
<template v-slot:item="{ item }">
<v-icon>{{mdiCheckboxBlankOutline}}</v-icon>{{ item }}
/template>
</v-combobox>
import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "#mdi/js";
Data(){
select: ["Stockholm"],
items: [
"Stockholm",
"London",
],
}
My question is therefore, how can replicate the default checkbox behaviour for the combobox menu using imported icons?
This thread seems to talk about it but never ends up showing a code example:
https://github.com/vuetifyjs/vuetify/issues/10904
(Meaning it should look like this)
You can use the item slot, where you are provided with the item, on and attrs object, to replicate the default behaviour.
You bind the on (events) and attrs (properties) objects to the custom list item, to send click events from your list item to combobox component.
Next you set the appropriate icon depending on the selected values. See the code below and the code sandbox.
<template>
<v-app>
<v-combobox
label="Label"
outlined
multiple
chips
v-model="select"
:items="items"
>
<template v-slot:item="{ item, on, attrs }">
<v-list-item v-on="on" v-bind="attrs">
<v-list-item-icon>
<v-icon>
{{ select.includes(item) ? checkIcon : uncheckIcon }}
</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item" class="text-left"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-combobox>
</v-app>
</template>
<script>
import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "#mdi/js";
export default {
name: "HelloWorld",
data() {
return {
items: ["One", "Two", "Three"],
select: [],
uncheckIcon: mdiCheckboxBlankOutline,
checkIcon: mdiCheckboxMarked,
};
},
};
</script>
CodeSandbox: https://codesandbox.io/s/recursing-banach-cb7ys?file=/src/components/HelloWorld.vue
I’m following this documentation: https://v2.vuejs.org/v2/guide/components.html
I created custom v-text-field component which looks like that:
<template>
<div>
<v-text-field
:label="label"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"></v-text-field>
</div>
</template>
<script>
export default {
name: "txtbox",
props: ['value', 'label'],
}
</script>
I implemented it in my main component almost succesfully:
<txtbox
label="Name"
v-model="eventName"
/>
I don’t think it is necessary to paste all the code, but if it is I will edit the post. Here is how it works:
I have a list, when i click on the list element the text-field displays content of it, this works fine. Sadly when I’m editing the content of text-field the v-model value is not updating. I can also add that it works fine with normal (like in the docs) instead of . Is there anything I can do to make it work, or should i use simple input ?
Thanks
When you want to $emit the new value, you just have to emit the $event, and not $event.target.value
<template>
<div>
<v-text-field
:label="label"
v-bind:value="value"
v-on:input="$emit('input', $event)"></v-text-field>
</div>
</template>
v-on:input can also be shortened to just #input
I'm creating a data table with Vuetify to show a list of records, where each record has a list of files to download. Then, I'm creating a button, for each table row, that when it is clicked, it should show a modal with the list of files.
The list is called tableRows and it has several objects. I provide an example below.
script
export default {
data () {
return {
tableRows: [
{
'properties': {
'date': '2015-12-19',
'title': 'LC82200632015353LGN01',
'type': 'IMAGES',
'showDownloadDialog': false
},
'provider': 'DEVELOPMENT_SEED'
},
...
],
showDownloadDialog: false // example
}
}
}
The table is built well, but I'm not capable to use the modal for each table row.
The modal example on the site works well, where I use just one variable (i.e. dialog) and I want to show just one single modal, however in my case, I have a list of objects, where each object may open a specific modal.
I've tried to put the showDownloadDialog attribute in each object from my list and bind it using v-model (v-model='props.item.properties.showDownloadDialog'), but to no avail. The modal does not open.
template
<v-data-table :items='tableRows' item-key='properties.title'>
<template v-slot:items='props'>
<tr class='tr-or-td-style-border-right'>
<td class='text-xs-left th-style-height'>
<div class='text-xs-center'>
...
<!-- Download button -->
<br>
title: {{ props.item.properties.title }}
<br>
showDownloadDialog: {{ props.item.properties.showDownloadDialog }}
<br>
<v-btn #click.stop='props.item.properties.showDownloadDialog = true' title='Show download list'>
<i class='fas fa-download'></i>
</v-btn>
<v-dialog v-model='props.item.properties.showDownloadDialog' persistent scrollable max-width="600">
<v-card>
...
<v-card-actions>
<v-btn #click='props.item.properties.showDownloadDialog = false'>
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</td>
</tr>
</template>
</v-data-table>
I've tried to print on the page the attribute props.item.properties.showDownloadDialog and it does not change when I click on the button. I believe this attribute is not reactive, because of that, its state does not change, but I don't get why it is not reactive. The props from data table seems to be a copy and not a reference for one record in my list tableRows.
example
I've already tried to add a simple flag in data () called showDownloadDialog, instead of using props.item.properties.showDownloadDialog, and it works, but it shows all the modals at the same time, not just the specific modal related to that record, unfortunately.
Would anyone know what can be happening?
Thank you in advance.
I was able to fix my problem by using Subash's help. I give the code below.
First, I've inserted a new property in my data (). I will use this property to show/close my modal and provide information to fill it.
downloadDialog: {
show: false
}
Inside data table I just let the button and I've created a method called showDownloadDialog where I pass the properties object (i.e. where the information is).
<v-btn flat icon color='black' class='v-btn-style'
#click='showDownloadDialog(props.item.properties)' title='Show download list'>
<i class='fas fa-download'></i>
</v-btn>
Outside data table, I've added v-dialog and I've bound it with downloadDialog.
In addition to it, I've created a method to close the dialog.
<v-dialog v-model='downloadDialog.show' persistent scrollable max-width="600">
<v-card>
...
<v-card-actions>
<v-btn #click='closeDownloadDialog()'>
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
Inside the showDownloadDialog I merge 'properties' into 'downloadDialog' and I open the modal, while closeDownloadDialog I just close the modal.
showDownloadDialog (properties) {
// merge 'properties' into 'downloadDialog'
Object.assign(this.downloadDialog, properties)
this.downloadDialog.show = true
},
closeDownloadDialog () {
this.downloadDialog.show = false
}
Thank you so much Subash for your help.
I am currently making a treeview using Vuetify. What I am trying to do is that I want to bind an event whenever I click on a node. For example when I click on a certain node a dialog box will pop out to show the node's details. I want to know how to fire off an event on click.
Vuetify's Treeview component provides a scoped slot label that you can use to change the content displayed for each node. For example, to open a dialog box, you could do something like this:
<v-treeview
v-model="tree"
:items="items"
activatable
item-key="name">
<template slot="label" slot-scope="{ item }">
<a #click="openDialog(item)">{{ item.name }}</a>
</template>
</v-treeview>
You can then use a dialog component and open it/change its contents using a openDialog method
Update 2022-04-01 the slot="label" slot-scope is deprecated. Here is an updated version:
<v-treeview
v-model="tree"
:items="items"
activatable
item-key="name">
<template v-slot:label="{ item }">
<a #click="openDialog(item)">{{ item.name }}</a>
</template>
</v-treeview>
<v-treeview
v-model="tree"
:items="items"
:active="active"
activatable
open-on-click
#update:active="test"
>
methods: {
test() {console.log('TEST', this.active)},
#anthonio-achiduzu , At least for Vuetify version 2.3.3, the #update:active is triggered before the this.active being changed , so the test() will output a empty array in the above code.
You've two events :
The first one is update:open that's fired when you click on a node that has child nodes and its handler has the opened node as parameter :
#update:open="openNode"
in methods :
methods:{
openNode(node){
//
}
}
The second one is update:active that's fired when you click on a leaf that doesn't child nodes and its handler has the clicked node as parameter :
#update:active="clickOnNode"
in methods :
methods:{
clickOnNode(node){
//
}
}
To get the node with its fields you should add the prop return-object :
<treeview return-object #update:active="clickOnNode" ...
With Vuetify 2.3.5, I use this and it's ok
<v-treeview return-object item-key="id" hoverable activatable selected-color="red"
#update:active="updateForm" color="warning" :items="categories">
</v-treeview>
<template slot-scope="{ item }">
<a #click="updateForm(item)">{{ item.name }}</a>
</template>
In methods, i write funtion updateForm (but this is console to test value):
updateForm(item)
{
if(item.length>0)
console.log(item[0].name)
}