When I make a search with Vuetify <v-autocomplete> and my API, mytext and myvalue are correctly updated and displayed in the suggestions only if write a word like FOO, if I write a string like FOO BAR, then I get the correct result with console.log(response.data) in the API call method, but I get nothing in the suggestions of <v-autocomplete>.
<template>:
<v-autocomplete
v-model="select"
:loading="loading"
:items="items"
item-text="mytext"
item-value="myvalue"
:search-input.sync="search"
hide-no-data
hide-details
label="My Autocomplete"
>
<template v-slot:item="data">
<v-list-item-content>
<v-list-item-title v-html="data.item.mytext"></v-list-item-title>
<v-list-item-subtitle
v-html="data.item.myvalue"
></v-list-item-subtitle
></v-list-item-content>
</template>
</v-autocomplete>
<script>:
<script>
export default {
data() {
return {
select: null,
loading: false,
items: [],
search: null
}
},
watch: {
search(val) {
console.log('search: ' + val)
val && val !== this.select && this.query(val)
}
},
methods: {
async query(v) {
this.loading = true
await this.$axios
.get('/api/foo', {
params: {
search: this.search
}
})
.then((response) => {
console.log(response.data)
this.items = response.data
})
.catch((error) => {
console.log(error)
})
.finally(() => {
this.loading = false
})
}
}
}
</script>
The search variable seems to be linked to the items variable.
You can apply no-filter prop to your v-autocomplete component.
<v-autocomplete
...
no-filter
...
>
</v-autocomplete>
As written in documentation for this prop:
Do not apply filtering when searching. Useful when data is being
filtered server side
https://vuetifyjs.com/en/api/v-autocomplete/#props
I finally fixed it by adding this prop to <v-autocomplete>:
:filter="() => true"
Related
I have this working code.
<template>
<v-card-text class="text-center">{{ ethPrice.ethereum.usd }} US$</v-card-text>
</template>
data() {
return {
ethPrice: { "ethereum": { "usd": "" } },
};
},
mounted() {
axios
.get(
"https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd"
)
.then((response) => (this.ethPrice = response.data));
But, when I do the same with this other I get this errors.
<template>
<v-card-text >{{ slpPrice.smooth-love-potion.usd }}</v-card-text>
</template>
data() {
return {
slpPrice: { "smooth-love-potion": { "usd": "" } },
};
},
mounted() {
axios
.get(
"https://api.coingecko.com/api/v3/simple/price?ids=smooth-love-potion&vs_currencies=usd"
)
.then((response) => (this.slpPrice = response.data));
Why one is working and the other one no? How can I fix this?
I tried to make it reactive object, but then the first is not working.
.then((response) => (this.$set(this.ethPrice, response.data)));
As you can see above comment, you have to access it like this.
<template>
<v-card-text >{{ slpPrice['smooth-love-potion'].usd }}</v-card-text>
</template>
...
I have a component that uses fetch to bring data via Axios and return data to render. I am using the store to set/get the data. The component renders with empty data and after debugging I see that data() method is called before fetch() method.
How to fix the problem and bring the data before the component is rendered
here is the component code:
<template>
<v-card
class="mx-auto"
max-width="500"
>
<v-sheet class="pa-4 primary lighten-2">
<v-text-field
v-model="search"
label="Search Company Directory"
dark
flat
solo-inverted
hide-details
clearable
clear-icon="mdi-close-circle-outline"
></v-text-field>
<v-checkbox
v-model="caseSensitive"
dark
hide-details
label="Case sensitive search"
></v-checkbox>
</v-sheet>
<v-card-text>
<v-treeview
:items="items"
:search="search"
:filter="filter"
:open.sync="open"
>
<template v-slot:prepend="{ item }">
<v-icon
v-if="item.children"
v-text="mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}"
></v-icon>
</template>
</v-treeview>
</v-card-text>
</v-card>
</template>
<script>
export default {
async fetch(){
console.log("Hi from Fetch !!!")
let response = await this.$axios.get('/items/tasks', {baseURL: 'http://localhost:8055'});
let tasks = response.data.data;
debugger
this.$store.commit('SET_ASSIGNMENTS', tasks);
},
data () {
debugger
console.log("data assignments: ", this.$store.state.assignments);
return {
items: this.$store.state.assignments,
open: [1, 2],
search: null,
caseSensitive: false,
}
},
computed: {
filter () {
return this.caseSensitive
? (item, search, textKey) => item[textKey].indexOf(search) > -1
: undefined
},
}
}
</script>
For this I use vuex this way:
const appStore = {
state () {
return {
data: [],
}
},
getters: {
data(state) {
return state.data
},
},
mutations: {
SET_ASSIGNMENTS(state, payload) {
state.data = payload
},
},
actions: {
async getData({ commit }, {fromDate, toDate}) {
let response = await this.$axios.get('/items/tasks', {baseURL: 'http://localhost:8055'});
let tasks = response.data.data;
commit("SET_ASSIGNMENTS", tasks);
}
}
}
export default appStore
Component code is like this:
<template>
. . .
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: "MyComponent",
components: {
. . .
},
computed: {
...mapGetters({
data: 'data'
})
},
mounted(){
this.getData();
},
methods: {
getData() {
this.$store.dispatch('getData')
}
}
}
</script>
data is not reactive, you can create a computed property that returns your items
ex:reactiveItems() {return this.items}
Every input in search i update the items prop but the v-autocomplete become empty
although the data in my component changed
i tried to add the no-filter prop it didnt help i guess something with the reactivity destroyed
i allso tried with computed property as an items but still same result
Every input in search i update the items prop but the v-autocomplete become empty
although the data in my component changed
i tried to add the no-filter prop it didnt help i guess something with the reactivity destroyed
i allso tried with computed property as an items but still same result
<script>
import ProductCartCard from "~/components/cart/ProductCartCard";
export default {
name: "search-app",
components: {
ProductCartCard
},
props: {
items: {
type: Array,
default: () => []
}
},
data() {
return {
loading: false,
filteredItems: [],
search: null,
select: null
};
},
watch: {
search(val) {
if (!val || val.length == 0) {
this.filteredItems.splice(0, this.filteredItems.length);
return;
} else {
val !== this.select && this.querySelections(val);
}
}
},
methods: {
querySelections(v) {
this.loading = true;
// Simulated ajax query
setTimeout(() => {
this.filteredItems.splice(
0,
this.filteredItems.length,
...this.items.filter(i => {
return (i.externalName || "").toLowerCase().includes((v || "").toLowerCase());
})
);
this.loading = false;
}, 500);
}
}
};
</script>
<template>
<div class="search-app-container">
<v-autocomplete
v-model="select"
:loading="loading"
:items="filteredItems"
:search-input.sync="search"
cache-items
flat
hide-no-data
hide-details
label="searchProduct"
prepend-icon="mdi-database-search"
solo-inverted
>
<template v-slot:item="data">
<ProductCartCard :regularProduct="data" />
</template>
</v-autocomplete>
</div>
</template>
One of the caveat of the v-autocomplete as described in the documentation:
When using objects for the items prop, you must associate item-text and item-value with existing properties on your objects. These values are defaulted to text and value and can be changed.
That may fix your issue
I am practicing the code example below.
I applied Vuetify.
This is the edit screen showing the data fetched from the API.
The problem is that the selected v-radio is not checked.
What is the problem?
<v-radio-group v-model="designType" :mandatory="false" row>
<v-radio
v-for="n in 3"
:key="n"
:label="`Type ${n}`"
:value="n"
:checked="n === designType"
:aria-checked="n === designType"
/>
{{designType}} //<<----- test value is no problem
</v-radio-group>
...
// script
data() => ({
...
designType: 1,
...
}),
mounted() {
this.edit = true
this.formEdit()
,
methods: {
async formEdit() {
const apiUrl = 'http://127.0.0.1:3100/cards/'
await this.$axios.get(apiUrl + this.$route.params.id).then(res => {
this.designType = res.data.designType
})
}
}
I use v-autocomplete component and updating items list after http request. But browser was freeze when i set items. What's wrong?
{
mixins: [search_field_block],
data: function () {
return {
item_component: {
props: ['item'],
template: '<div v-html="item.full_name"></div>'
}
};
},
methods: {
search: function (text) {
this.search_text = text.trim();
if (this.search_text) {
this.doGET('/api-method/search_place/', {'query': this.search_text}, this.update_items);
}
},
update_items: function (data) {
this.items = data;
}
}
}
I use a mixin for other components. It contained universal template with v-autocomplete:
<field-block :label="label" :error="field_error" :description="item_description">
<v-autocomplete slot="input"
class="page-form__field required"
:class="{ focused: focused, 'not-empty': not_empty, error: field_error != null, 'list-open': is_list_open }"
v-model="value"
ref="autocomplete"
:required="required"
:inputAttrs="{ref: 'input', autocomplete: 'off'}"
:items="items"
:component-item="item_component"
:get-label="getLabel"
:min-len="2"
#update-items="search"
#item-selected="onSelect"
#input="onInput"
#blur="onBlur"
#focus="onFocus">
</v-autocomplete>
</field-block>
I was find v-autocomplete on the github. It contain a v-for block for rendering search results
I found the problem. I have "computed" property and set value to parent app:
computed: {
is_list_open: function () {
this.$parent.list_opened = this.focused && this.items.length > 0 || (this.$refs.autocomplete ? this.$refs.autocomplete.show : false);
return this.$parent.list_opened;
}
},
This is incorrect behavior.