I am populating a dropdown from a computed method that returns an array of store objects. Then in the vue-select, I am passing this in as options and having the option.address show in the dropdown. That is working as expected but when clicking a dropdown option, the box doesn't show the value -- it just remains blank.
computed: {
storeLocationsArray: function() {
let arr = [];
this.storeLocations.forEach((location,index) => {
arr.push({id: index, address: location.address})
})
return arr;
}
}
<v-select
v-model="selectedPickupLocation"
:options="storeLocationsArray"
>
<template class="single-option" slot="option" slot-scope="option">
{{option.address}}
</template>
</v-select>
You can use label to display address instead of slot
<v-select
v-model="selectedPickupLocation"
:options="storeLocationsArray"
label="address"
>
</v-select>
Related
i want to use a dynamic slot name(v-slot="{ hover }"), when using this hover component
<v-hover v-slot="{ hover }">
<v-chip v-if = "visibleChip">
Abc
</v-chip>
<script>
export default Component({
computed: {
visibleChip() {
return this.hover && this.someAction && this.someOtherAction
}
},
})
</script>
Where should i define this hover slot in order to use it in computed property and how ?
New to vuejs. I have a vue component that has two array props: countries and countryDetails
countries -> ['England', 'Germany']
countryDetails -> [ { country: 'England', capital: 'London' } ]
I’m able to display a dropdown using countries array.
<v-autocomplete
v-model="category"
:items="countries"
label="Countries" />
How do I get the capital to show up in a user editable text field when corresponding country selected and available in countryDetails array (England) or show an empty user editable text field when country not available in countryDetails array (Germany)
<v-text-field
class="mr-2"
v-model="countryDetails[i].capital"
label="Capital" />
You should handle the autocomplete change with a listener calling a method which set the text-field v-model value, if the choice is matching a country in the country details array :
<template>
<div>
<v-autocomplete #change="handleChange"
:items="countries"
label="Countries" />
<v-text-field class="mr-2"
v-model="selectedCountryCapital"
label="Capital" />
</div>
</template>
data() {
return {
selectedCountryCapital : null
}
},
methods: {
handleChange(choice) {
const matchingCountry = this.countryDetails.find(details => details.country === choice);
this.selectedCountryCapital = matchingCountry ? matchingCountry.capital : null;
}
}
When I try and select a value for a <v-autocomplete> field programmatically, the field appears blank until I click/focus on it. Then the correct value shows and is already selected.
<v-autocomplete
:placeholder="placeholder"
v-model="selected"
item-value="id"
item-text="name"
:items="items"
menu-props="{'closeOnClick' : true, 'closeOnContentClick: true'}"
chips
deletable-chips
small-chips
multiple
ref="input"
/>
computed
computed: {
//
selected: {
get() {
return this.value;
},
set(val) {
return this.value = val;
}
},
and I set the selected value with (eg):
this.$refs.input.selcted = 5;
once I click on it, I will see that Item 5 was indeed selected and will show properly after focus.
Since the value is updated on input event, you could trigger this event whenever you want to update bound model.
this.$refs.input.$emit('input', 5)
I have a table where I have a number of items shown all grouped by a string property.
By default these groups are all expanded.
https://vuetifyjs.com/en/components/data-tables/#grouped-rows
Is there anyway to collapse all the groups or expand them at once ?
Ie have a collapse all button above the table. I have search but can't find a solution.
Thanks
The latest Vuetify does pass the isOpen and toggle values in the group.header slot. You could customize this slot to track $refs for each group that can then be bound to a toggle all (or expand/collapse all) function....
<template v-slot:group.header="{ group, headers, toggle, isOpen }">
<td :colspan="headers.length">
<v-btn #click="toggle" small icon :ref="group">
<v-icon v-if="isOpen">mdi-chevron-up</v-icon>
<v-icon v-else>mdi-chevron-down</v-icon>
</v-btn>
{{ group }}
</td>
</template>
methods: {
toggleAll () {
Object.keys(this.$refs).forEach(k => {
this.$refs[k].$el.click()
})
}
}
Demo: https://codeply.com/p/ys4Df2OLiE
Codeply-er answer may work but I didn't want to track $refs for each group. In the end I add this hack
private expandAll() {
const self = this;
for (const name of Object.keys(self.$refs.expandableTable.openCache)) {
self.$refs.expandableTable.openCache[name] = true;
}
}
private collapseAll() {
const self = this;
for (const name of Object.keys(self.$refs.expandableTable.openCache)) {
self.$refs.expandableTable.openCache[name] = false;
}
}
This probably relies on an internal method openCache so not ideal.
I'm trying to create some dynamic filters in bootstrap-vue 2.0.0-rc.11 for the bootstrap-table columns
In my example I did this
<b-table class="io-store-list-table table-striped" show-empty hover stacked="md" :items="stores" :fields="storeFields" :current-page="currentPage" :per-page="perPage" :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" #filtered="onFiltered" empty-filtered-text="{l s='There are no records matching your request' mod='ioweb_slocator'}">
<template slot="top-row" slot-scope="data">
<th v-for="field in fields">
<input v-if="field.filterable" type="text" #click.stop value="" />
</th>
</template>
<template v-for='field in formatted' :slot='field' slot-scope='row'>
<span v-html='row.value'></span>
</template>
</b-table>
<b-row>
<b-container>
<b-col xs="12" class="my-1 io-pagination">
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0"/>
</b-col>
</b-container>
</b-row>
</b-table>
Which renders a table like this
Now I'm attempting to filter the items based on what value is entered in each column. For example if I type mypartnername at the input box below Partner column, I would like to dynamically filter the items based on the row key called partner but I'm not sure how to approach this.
Based on the accepted answer I was able to create a structure that helped me like this.
Step 1:
Create a property filteredResults and set it equal to my unfiltered items property
let app = new Vue({
el: "#app",
data() {
return {
...
stores: stores,
groups: groups,
totalRows: stores.length,
filters: [],
loop: 0,
filteredResults: stores,
}
},
Step 2
Used filteredResults in the :items slot
Step 3
Create a single function to set the filters
methods: {
...
setFilter(property, value) {
console.log("Filtering");
this.filters[property] = {};
this.filters[property].value = value;
this.filteredResults = this.stores.filter(item => {
let keep = true;
// This is a basic equality filter. What I did in the actual code was to have an object with filter functions for each key. If a key was missing, it defaulted to straight equality.
this.fieldKeys.forEach(key => {
keep =
keep &&
(this.filters[key] === undefined || this.filters[key].value === undefined || this.filters[key].value === "" || item[key].match(this.filters[key].value));
});
return keep;
});
},
},
what about something like this? I dont know if i got your problem right.
<input v-if="field.filterable" #onchange="setFilter(field.property, $event.target.value)" type="text" #click.stop />
in the setFilter function you could do something like this:
setFilter(property, value) {
this.filters[property].value = value
}
get your results with a computed property
filteredResults(){
return users = this.users.filter((item) => {
for (var key in this.filters) {
if (item[key].value === undefined || item[key].value != filter[key])
return false;
}
return true;
}
}
I dont know if it works, couldnt test it. I am curious about the solution here.