Loop event fired with buefy autocomplete

Question

I have 2 autocomplete inputs :

<template>
<b-autocomplete
  v-model="code"
  :open-on-focus="true"
  @input="updateDescription"
/>
<b-autocomplete
  v-model="description"
  :open-on-focus="true"
  @input="updateCode"
/>
</template>
<script>
export default {
  data () {
    return {
      code: '',
      description: ''
    }
  },
  methods: {
    updateCode (description) {
      this.code = // function to find the code corresponding to the right description
    },
    updateDescription (code) {
      this.description = // function to find the description corresponding to the right code
    }
  }
}
<script>

When, the code input is modified, I would like to update the value of the description input and in the same way, when the description is modified by the user, I would like the code input to be updated. However, once code is modified, the @input is fired which update description and the fired the @input as well. How can I only listen for the user event ?

Answer 1

Try with :value instead v-model:

new Vue({
  el: '#app',
  data () {
    return {
      code: '',
      description: ''
    }
  },
  methods: {
    updateCode () {
      this.code = 2
    },
    updateDescription () {
      this.description = 3
    }
  }
})

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<div id="app">
   <b-autocomplete
    :value="code"
    :open-on-focus="true"
    @input="updateDescription"
  ></b-autocomplete>
  <b-autocomplete
    :value="description"
    :open-on-focus="true"
    @input="updateCode"
  ></b-autocomplete>
</div>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>