Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je souhaite lancer une methode apres avoir selectionné le pays ( ici France )

https://jsfiddle.net/spham92/0ed7wvqj/

qui me permettrais de mettre a jour la deuxieme liste avec seulement les villes du pays concernés

Ma démarche de faire un un watch sur la variable "query" marche mais manque un peu d'elegance, car "query" change a chaque fois que je complete la saisi.
Je veux eviter d'appeler a tout bout de champs la methode qui peuple les villes a la base.
Comme c'est un element input et non select, je ne peux pas faire d'ecoute sur l'evenement selected.

const template = `
<div>
  <vue-bootstrap-typeahead
    v-model.lazy="query"
    :data="countries"
    placeholder="Saisir un pays"
  />
  <p class="lead">
    Pays selectionné: <strong>{{query}}</strong>
  </p>
</div>
`

new Vue({
  template,
  components: {
    VueBootstrapTypeahead
  },
  data() {
    return {
      query: '',
      countries: [
        'France',
        'United States',
        'Mexico'
      ]
    }
  },
  methods: {
    getVillesParPays : function() {
        console.log('liste des villes par pays')
    }
  },
  watch: {
    'query': function (newVal, oldVal) { // watch it
      if (newVal.length === 5) {
        this.getVillesParPays()
      }

    }
   },
}).$mount('#app')

2 réponses


Bonjour,

Ton component vue-bootstrap-typeahead ne donne-t-il pas accès à un event @select ou @change ou un autre event dans le même genre que tu pourrais utiliser à la place du watcher ?

je ne connais pas vuejs, mais du coup, ca serait pas possible de debounce l'appel apres la fin de frappe?