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

Question

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>

No, you want to see when a value has been selected, right? So you can watch the item you used in the v-model. — Roy J
– Roy J, Commented Jan 15, 2019 at 14:20

Roy J · Accepted Answer · 2019-01-15 14:30:12Z

1

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>

answered Jan 15, 2019 at 14:30

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taian Over a year ago

Thank you! It's working with the watch, but I don't know yet why it's not accepting @input handler.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related