Я изучаю laravel с Vue js. Я реализую поисковую систему с компонентами vue js. Надеюсь, вы поможете мне заранее, спасибо.

Это мой компонент Vue js, в котором находится мой поиск ввода.

<template>
    <div class="container">
        <form>
            <input 
                class="form-control" 
                placeholder="buscar"
                type="search"
                v-model="buscador"
                @keyup="buscarProductos" 
            >
        </form>
    </div>
</template>

Это мой файл app.js.

const { default: Axios } = require('axios');

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
    
    created(){
        this.producto();
    },

    data: {
        
        libros:[],
        buscador: '',
        setTimeoutbuscador:''
    },
    methods: {
        producto(){
            
            Axios.get('./sales', {
                params:{
                    filtro: this.buscador
                }
            })
            .then(res => {
                this.libros = res.data.data ;
            })
            .catch( error => {
                console.log( error.response )
            });
        },

        buscarProductos(){
            clearTimeout( this.setTimeoutbuscador = setTimeout(this.producto, 360) )
        }

    }
 
});

У меня есть вид лезвия, на котором я размещаю свой компонент таким образом.

<div id="app">
    <example-component></example-component>      
</div>
0
MANUEL 3 Дек 2020 в 19:04

1 ответ

Лучший ответ

Ваш Пример файла Component.vue должен выглядеть, как показано ниже.

<template>
    <div class="container">
        <form>
            <input 
                class="form-control" 
                placeholder="buscar"
                type="search"
                v-model="buscador"
                @keyup="buscarProductos" 
            >
        </form>
    </div>
</template>
<script>
import Axios from 'axios';

export default {
    
    created(){
        this.producto();
    },

    data(){
        return {
            buscador: ''
        }
    },
    
    methods: {
    
        producto(){
            
            Axios.get('./sales', {
                params:{
                    filtro: this.buscador
                }
            })
            .then(res => {
                this.libros = res.data.data ;
            })
            .catch( error => {
                console.log( error.response )
            });
        },

        buscarProductos(){
            clearTimeout( this.setTimeoutbuscador = setTimeout(this.producto, 360) )
        }
    }
}

И ваш app.js будет

require('./bootstrap');

import Vue from 'vue';
import ExampleComponent from './ExampleComponent';

Vue.component('example-component', ExampleComponent);

const app = new Vue({
    el: '#app'
});

Затем вы можете использовать ExampleComponent как

<div id="app">
    <example-component></example-component>      
</div>

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

К свойствам данных корневого компонента можно получить доступ, например, как $root.bucador.

Однако, насколько это возможно, компоненты Vue должны быть определены как можно более изолированными - они должны содержать свойства, необходимые в его шаблоне. Для свойств, которые необходимо передать из родительского компонента, они могут быть переданы как реквизиты.

Прочтите документацию Vue, https://vuejs.org/v2/guide/ там много примеров.

0
Donkarnash 3 Дек 2020 в 17:01