Why is there no data output?

Question

Vue.js

Good afternoon. I am a beginner and tried to make my own search engine using api, but I messed something up here

<template>
  <div class="Search" id='app'>
    <input type="text" class="Search__input" v-model="product">
    <tr  v-for="products in result">
    <li>{{products.title}} </li>
    </tr>
    <button class="Search__button" @click="results()">Найти</button>
    <ResultproductsComponet> </ResultproductsComponet>
  </div>
</template>

<script>
import ResultproductsComponet from './ResultproductsComponet.vue'
  export default {
    components: { ResultproductsComponet },
    data:function(){
      return {
        result:[],
        product: ''
      }
    },
    mounted(){
      this.results()
    },
    methods:{
      results:function (prod){
        var prod = product;
        axios.get('/api/search/'+ prod).then((Response)=> {
          this.result = Response.data
        });
      }
    }
  }
</script>

The console says it can't find product because I'm not using hooks correctly. View zhs uses on Laravel. Can't see my mistake.

Answer 1

The console says it can't find product because I'm not using hooks correctly.

No. The console tells you something else.
Here is this line,
What did you want to say to her? What else for product? This is the one in datalies? Then it should be this.product. Why are you trying to define a variable with the same name as the parameter? And when calling in a hook mounted- why don't you pass anything to the method results, does it have a parameter defined?
I think it should be like this: just delete the line quoted above, and mountedwhen calling it, resultspass it product- . Or like this: delete the line, delete the parameter , in the call instead use . this.results(this.product)prodaxios.getprodthis.product