Call component function from html view in Vue

Question

I'm stuck in -maybe- logic usage of Vue, I have a "list" component which get results from ajax, the problem appears when I want to add a search field, I have something like this:

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 works like a charm, the point is that I want to add an input to search, I've made some research and I've found that the only way to get this is using another component, but I don't want to create another component just for an input, so I want to do something like:

index.html

<input type="text" v-model="goSearch">

<search-list></search-list>

But the problem that I'm facing is that Vue is returning 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 tried with v-bind="goSearch" but doesn't work either. Any ideas to accomplish this?

UPDATE: I've created a button to call the function:

<button @click="goSearch"></button>

The function "goSearch" now tries to get the value from the text box, but also this doesn't work.

@Core972 I've read that, but as far as I know prop is only for child component to parent component, isn't it? — AndreX
– AndreX, Commented Jun 11, 2018 at 19:01
Your created and methods keys are out of the exported object. Do not you get a parse error? — ghybs
– ghybs, Commented Jun 11, 2018 at 19:09

Bhojendra Rauniyar · Accepted Answer · 2018-06-11 19:00:34Z

0

You're getting such error because you're using:

<input type="text" v-model="goSearch">

Here, the goSearch is data and this data is not found by vue. But you meant it to be a method. Vue doesn't work like that. You will not require to use v-model if you want to bind some method in it. But you will need to bind v-on:input

<input type="text" v-on:input="goSearch">

answered Jun 11, 2018 at 19:00

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndreX Over a year ago

Thanks for your answer but also Vue returns the same error and adding a new one: [Vue warn]: Invalid handler for event "input": got undefined

tony19 · Accepted Answer · 2022-07-16 04:57:45Z

0

The problem is that the goSearch method is defined inside the searchList component, anything outside of it doesn't know what it is (in this case, the input element), hence the warn.

A solution would be defining the method in the parent component (in this case, seems like it's index.html), so all children components can access it.

You would also have to store the results array inside the parent data and send it to the searchList component using props together with the goSearch function, like so:

search.vue

<template>
    <div>
        <div v-for="(result, index) in results" v-bind:key="index">
            <h2>{{ result.title }}</h2>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'searchList',
    props: ['results'],
    created: function () {
      this.$emit('goSearch')
    }
  }
</script>

Parent component:

<template>
  <div id="app">
    <button v-on:click="goSearch">Get Random Post</button>
    <search-list
            v-on:goSearch="goSearch"
            v-bind:results="results"
    ></search-list>
  </div>
</template>

<script>
import searchList from './components/searchList'

export default {
  name: 'App',
  data () {
    return { results: [] }
  },
  components: {
    searchList
  },
  methods: {
    goSearch: function () {
      const postId = Math.floor(Math.random() * (100 - 1 + 1)) + 1
      fetch('https://jsonplaceholder.typicode.com/posts/' + postId)
        .then(response => response.json())
        .then(json => {
          this.results = [json]
        })
    }
  }
}
</script>

Keep in mind that if more than one component uses the property/method, you need to define it in a parent component, then you send that info to the children components using props and the children can trigger events of that parent using emit.

Also, check out this answer.

edited Jul 16, 2022 at 4:57

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 11, 2018 at 19:21

Feel The Noise

6442 gold badges12 silver badges32 bronze badges

11 Comments

AndreX Over a year ago

This an excellent answer, but I can't unify the input and the results, because they have some html structure and put both together implies that I have to put all the HTML in vue template. Also, using $emit('goSearch'); returns an error: [Vue warn]: Error in created hook: "ReferenceError: $emit is not defined", I think that you are talking about using two components, something that I don't want to do, but it seems that's a must.

Feel The Noise Over a year ago

How so? What happens?

AndreX Over a year ago

I just update my comment. Sorry I hit enter prematurely.

Feel The Noise Over a year ago

May I ask, is everything wrapped inside the export default object?

AndreX Over a year ago

Yes, it is. As a part of the component. In my app.js I just call it: Vue.component('search-list', require('./components/SearchList.vue')); But the <input> it's outside the component, of course.

|

Collectives™ on Stack Overflow

Call component function from html view in Vue

2 Answers 2

1 Comment

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

11 Comments

Your Answer

Sign up or log in

Post as a guest