I seem to be stuck in a tricky situation with Vue logic. I have a "list" component that retrieves results from an ajax call. The issue arises when I try to incorporate a search field. Here is what I currently have:
search.vue
<template>
<div>
<div v-for="(result, index) in results">
<h2>{{ result.name }}</h2>
</div>
</div>
</template>
<script>
export default {
name : 'searchList',
data() {
return { results: [] }
}
created: function(){
this.goSearch();
},
methods : {
goSearch : function(){
this.results = axios.get('/search');
}
}
}
</script>
This setup works perfectly, but now I want to add a search input field. I've researched and discovered that I need to use another component for this, but I don't want to create a separate component just for an input field. My idea is to do something like this:
index.html
<input type="text" v-model="goSearch">
<search-list></search-list>
However, the problem I'm encountering is that Vue is throwing an error:
[Vue warn]: Property or method "goSearch" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
I've also attempted using v-bind="goSearch", but that didn't work either. Any suggestions on how to make this work?
UPDATE: I've added a button to trigger the function:
<button @click="goSearch"></button>
The "goSearch" function now attempts to retrieve the value from the text box, but even this approach is not functioning. Any insights on how to achieve this successfully?