Search code examples
vue.jsvue-multiselect

Vue.js and Multiselect - The name 'input' does not exist in the current context


I'm trying to start a method after the value of the component Vue Multiselect has been changed using @input, but I'm getting the following compilation error:

CS0103: The name 'input' does not exist in the current context

Here's my multiselect:

<multiselect v-model="Instalacao.value" label="Serie" track-by="Serie" placeholder="Nº de série" :options="Instalacoes"
    :multiple="false" :searchable="true" :allow-empty="false" :disabled="Editando" @input="getTecnicosByRepresentante">
    <span slot="noResult">Nenhum técnico encontrado</span>
</multiselect>

Solution

  • This example works as expected: both the watch and the @input handler execute when you select a value. Your problem is probably not in the code that you included here.

    new Vue({
      el: '#app',
      components: {
        Multiselect: window.VueMultiselect.default
      },
      data: {
        Instalacao: {
          value: null
        },
        Instalacoes: [{
            Serie: 'one',
            value: 'Vue.js'
          },
          {
            Serie: 'two',
            value: 'Vue-Multiselect'
          },
          {
            Serie: 'three',
            value: 'Vuelidate'
          }
        ]
      },
      watch: {
        'Instalacao.value': function(newValue) {
          console.log('Updated', newValue);
        }
      },
      methods: {
        getTecnicosByRepresentante() {
          console.log("Input detected, too");
        }
      }
    })
    <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
    <link href="https://unpkg.com/vue-multiselect@latest/dist/vue-multiselect.min.css" rel="stylesheet" />
    <script src="https://unpkg.com/vue-multiselect@latest/dist/vue-multiselect.min.js"></script>
    <div id="app">
      <multiselect v-model="Instalacao.value" label="Serie" track-by="Serie" placeholder="Nº de série" :options="Instalacoes" :multiple="false" :searchable="true" :allow-empty="false" @input="getTecnicosByRepresentante">
        <span slot="noResult">Nenhum técnico encontrado</span>
      </multiselect>
      <pre>{{ Instalacao.value }}</pre>
    </div>