New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[mdAutocomplete] Error in nextTick: "Error: You should use a fetch
function prop"
#1002
Comments
fetch
function prop"fetch
function prop"
i tried with fetch prop and i have
my code :
methods: {
filteredAgencies (param) {
let query = param.q
let filtered = this.agencies.filter(agency => {
let filterByName = agency.name ? agency.name.toLowerCase().includes(query.toLowerCase()) : ''
let filterByRegion = agency.address.region ? agency.address.region.toLowerCase().includes(query.toLowerCase()) : ''
let filterById = agency.id !== null ? agency.id.includes(query) : ''
return filterByName || filterById || filterByRegion
})
return query.length >= 1 ? filtered : this.agencies
}
} |
I wrote an example for you.
{
methods:{
filterList: (list, inputString) => {
// do some thing
return result
}
}
}
{
methods:{
fetch: async ({q}) => {
let inputString = q
let result = await getResult(inputString)
return result
}
}
} Use It's more likely better to use |
Hello, Thank you for your helping !
methods: {
filteredAgencies: (agencies = this.agencies, query = this.searchAgenciesQuery) => {
return agencies.filter(agency => {
let filterByName = agency.name ? agency.name.toLowerCase().includes(query.toLowerCase()) : ''
let filterByRegion = agency.address.region ? agency.address.region.toLowerCase().includes(query.toLowerCase()) : ''
let filterById = agency.id !== null ? agency.id.includes(query) : ''
return filterByName || filterById || filterByRegion
})
}
} I pass anonymous method to filteredAgencies and my html is the same as before: |
What error did you got? Could you please reproduce it in codepen? |
i simplify some code (i mocked calls instead of calling service get etc.. ) but the logic is the same
` See the Pen Vue Material Issue #1002 by Alex (@Alex_Mugen) on CodePen. <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>` |
oups , i changed version of dependencies now it's work on codepen , i set the last version of vuejs and vue material as my package json in my project : "vue": "^2.3.3",
"vue-material": "^0.7.1" But in my project it still not works it shows error
and when i try to write some text in my input
is it possible it is a version problem ? because i try with my first version of my code as above and it works.. But it looks strange because in my package json i tell to get the last version started from *** "vue": "^2.3.3",
"vue-material": "^0.7.1" |
|
thank you for your explanation for
I tried differents solutions but i cannot find the right , i have again
while on the copen it works |
I cannot help you if you don't reproduce it. |
I misunderstood about the warning:
I check the code b802afd mdAutocomplete line 26 That list should be an object list so it's seem like the warning always happen. I think it's an issue. You could decide what property key to show or select by the |
ok thank you for the precision 🥇 i'm trying to understand my bug with
|
I cannot understand the mistake.. In my project , i have a template : i have a created that get agencies : Services.getAgencies({size: 1000, page: 0}).then(resp => {
this.agencies = resp
}) I have a methods that contains filteredAgencies : filteredAgencies () {
console.log('filteredAgencies')
return this.agencies.filter(agency => {
let filterByName = agency.name ? agency.name.toLowerCase().includes(this.searchAgenciesQuery.toLowerCase()) : ''
let filterByRegion = agency.address.region ? agency.address.region.toLowerCase().includes(this.searchAgenciesQuery.toLowerCase()) : ''
let filterById = agency.id !== null ? agency.id.includes(this.searchAgenciesQuery) : ''
return this.searchAgenciesQuery.length > 1 ? filterByName || filterById || filterByRegion : this.agencies
})
}, and that 's all ... |
Did you upgrade the modules to latest version? |
i think is already the latest version because in my package json i have It means that it take the latest right ? |
Execute this command in your project directory to check modules installed
|
Thank you ! vue@2.4.2
├── vue-loader@12.2.2
├── vue-material@0.7.4
├── vue-router@2.7.0
├── vue-style-loader@3.0.1
├── vue-template-compiler@2.4.2
├── webpack@2.7.0
├── webpack-bundle-analyzer@2.9.0
├── webpack-dev-middleware@1.12.0
├── webpack-hot-middleware@2.18.2
└── webpack-merge@4.1.0 🤔 |
i compared two code again and it's exaclty the same, i set my agencies as a local array like in code pen because it s the only difference but it doesn't work 👿 |
Sorry i missed something , i tested to set a local array like this : Services.getAgencies({size: 1000, page: 0}).then(resp => {
this.agencies = [{name:'toto', region: 'test', id: '123'},
{name:'tata', region: 'aze', id: '456'},
{name:'titi', region: 'taiwan', id: '789'}]
}) instead of set agencies without promise this.agencies = [{name:'toto', region: 'test', id: '123'},
{name:'tata', region: 'aze', id: '456'},
{name:'titi', region: 'taiwan', id: '789'}] now i have the error we talked before
|
It's not a fatal error. I think you could ignore it temporarily. I have no idea whether this change with the key of the menu item is a good idea or not: <md-menu-item v-if="items.length"
v-for="item in items"
:key="item[printAttribute]"
@keyup.enter="hit(item)"
@click="hit(item)">
{{ item[printAttribute] }}
</md-menu-item> |
ok , i will use md-autocomplete if it'ss not a fatal error ! i want to say you thank you a lot 🥇 |
Kept getting the error
Tinkered around and got it to work like this
.
Using name since its default but can be changed in 'print-attribute' prop |
Closing this issue as our focus is on the new 1.0.0 version. |
In case anyone is using the 0.8.1 version and gets this error. It happens when the initial state of the list you're pointing to is empty. Simply initialize the list with fake data. Something like:
|
Hello,
i want to use md autocomplete, with list prop and filteredList but i have an error
my code below :
<md-autocomplete :min-chars="3" v-model="searchAgenciesQuery" :list="agencies" :filter-list="filteredAgencies" ">
agencies is the result of my promise
filteredAgencies is my filter method :
I don't understand the difference between list prop and fetch prop. I don't use fetch cuz i have to store locally my agencies, so my promise is not for the fetch that it should return but it implement on the created, so i dont want to use fetch way
Thanks a lot for your help
The text was updated successfully, but these errors were encountered: