web-dev-qa-db-ja.com

v-on：changeはvue-multiselectでは機能しません

Vue.jsプロジェクトでvue-multiselectコンポーネントを使用しています。v-onディレクティブを使用して、changeイベントで関数を実行しています。

<multiselect v-model="selected" :options="projects" :searchable="false" :custom-label="customLabel" track-by="name" v-on:change="executeLoader">
<template slot="customLabel" slot-scope="{ customLabel }"><strong>{{ option.name }}</strong></template>   
</multiselect>

ここに完全なコードの例があります： https://codesandbox.io/s/yjjon0vzxj

v-on:changeは<select>コンポーネントで動作していましたが、vue-multiselectで動作を停止しました！ v-on:click="executeLoader"で試しましたが、それもうまくいきませんでした。

vue.jsvuejs2vue-componentvue-events
3
Ciasto piekarz

Vue-multiselectでは、コンポーネントであるため、単純な<select>要素のように動作するように扱うことはできません。

コンポーネントで、他のhtmlタグと同じように動作し、イベントをクリックすることを「リッスン」することが期待される場合は、.nativeというイベント修飾子を追加する必要があります。

したがって、どのコンポーネントでも実行できます。

<... @click.native="executeLoader" />

しかし、それはあなたが探しているものではないと思います。タグを追加するとき、つまり、選択したアイテムが増えるときに関数をトリガーする必要があります。

そのために、vue-multiselectは@inputイベントを公開するため、以下を使用して処理できます。

<... @input="executeLoader" />

そして今、executeLoaderを呼び出して、引数を次のように受け入れます。

methods: {
  executeLoader(selectedItems) {} 
}
0
samayo