[Vuejs]-Property or method "buscador" is not defined on the instance but referenced during render. Vue js

by

0👍

✅

Your ExampleComponent.vue file should look like below

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

And your app.js would be

require('./bootstrap');

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

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

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

Then you can use the ExampleComponent as

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

Data properties defined on root component cannot be accessed as local properties on a vue component.

Data properties of root component can be accessed as $root.bucador for example.

However as far as possible Vue components should be defined as decoupled as possible – it should contain properties required in it’s template. For properties required to be passed from parent component they can be passed as props.

Read Vue docs https://v2.vuejs.org/v2/guide/ it has plenty of examples

Leave a comment