Почему не происходит вывод данных?

Question

[Kazah90]

Добрый день. Я новичек попытался сделать свой поисковик и использованием апи, но что-то я тут нахамутал

<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>

Консоль говорит, что не может найти product, потому что я не правильно использую хуки. Вью жз использует на ларавеле. Не могу увидеть свою ошибку.

Answer 1

[0xD34F]

Консоль говорит, что не может найти product, потому что я не правильно использую хуки.

Нет. Консоль вам говорит что-то другое.

Вот эта вот строка,

var prod = product;

- что вы хотели ею сказать? Что ещё за product? Это который в data лежит? Тогда должно быть this.product. Почему вы пытаетесь определить переменную с таким же именем как и у параметра? А при вызове в хуке mounted - почему ничего не передаёте в метод results, у него же определён параметр?

Думаю, должно быть так: строку, процитированную выше - просто удаляете, а в mounted при вызове results передавайте ему product - this.results(this.product). Или так: строку удаляете, удаляете параметр prod, в вызове axios.get вместо prod используете this.product.

Comments

[Kazah90]

понял,принял.