Component Autocomplete VueJS

Question

Component Autocomplete VueJS

Navigation

#1 by (1 votes)

2

I want to create a component of autocomplete , so I have the following code.

<Input v-model="form.autocomplete.input" @on-keyup="autocomplete" />
<ul>
    <li @click="selected(item, $event)" v-for="item in form.autocomplete.res">
        {{item.title}}
    </li>
</ul>

autocomplete(e){
    const event = e.path[2].childNodes[4]

    if(this.form.autocomplete.input.length > 2){
        this.Base.get('http://localhost:3080/post/search/post', {
            params: {
                q: this.form.autocomplete.input
            }
        })
        .then(res => {
            this.form.autocomplete.res = res.data

            if(this.form.autocomplete.res.length > 0)
                event.style.display = 'block'
        })
    }
},
selected(item, e){
    this.form.autocomplete.item = item
    console.log(e)
}

However, how would I do to have the return after selecting my item in the main file?

Ex:

Home.vue

<Autocomplete :url="www.url.com/test" />

When selecting the item I want from my autocomplete , how do I get the return from it and store it in that file, as if I were using v-model ?

NOTE: The URL and other information will go through props later.

javascript vue.js

asked by anonymous 07.06.2018 / 20:18

1 answer

Insert summary when there is a change in a PHP Array Add and subtract values from multiple input's after they have been created or removed with appendChild and removeChild.

score 1 · Accepted Answer

I believe that the logic of the components leads to a pattern where v-model binds the definition of the child component so that it can capture it, treat it and even issue it back to the parent, this can be done through of @input , example ...

Vue.component('products-list', {
  template: '#my-input',
  data: function() {
    return{
        product : {
        	name: ""
        }
      }
    },
});

var app = new Vue({
  el: '#app',
  data: {
    product: {
      name: "",
    }
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script><divid="app">
  <products-list v-model="product.name"></products-list>
  <br>Componente pai : {{product.name}}
</div>

<template id="my-input">
  <div>
    <input @input="$emit('input',$event.target.value)"
    v-model="product.name"
    />
    <br><br>Componente filho : {{product.name}}
  </div>
</template>