source

v-on: vue-multicelect에 변경이 적용되지 않음

factcode 2022. 8. 13. 12:07
반응형

v-on: vue-multicelect에 변경이 적용되지 않음

vue.js 프로젝트에서 vue-multiselect 컴포넌트를 사용하고 있으며, 변경 이벤트에 대한 기능을 실행하기 위해 v-on 지시어를 사용하고 있습니다.

<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-multicelect로 동작을 정지했습니다.v-on:click="executeLoader"하지만 그것도 효과가 없었어요

@click메서드를 트리거하지 않습니다.executeLoadervue 멀티 셀렉트 포함.사용할 수 있습니다.@input- 와 비슷합니다.v-on:change,@close,@select다음 예시와 같습니다.

<multiselect placeholder="Pick at least one" select-label="Enter doesn’t work here!" :value="value" :options="options" :multiple="true" :searchable="true" :allow-empty="false" :hide-selected="true" :max-height="150" :max="3" :disabled="isDisabled" :block-keys="['Tab', 'Enter']" @input="onChange" @close="onTouch" @select="onSelect"></multiselect>

당신 같은 경우에는 제가 노력하겠습니다.@input="executeLoader"

vue-multicelect에서는 컴포넌트이기 때문에 단순한 동작으로 취급할 수 없습니다.<select>요소.

컴포넌트에서 다른 html 태그와 마찬가지로 이벤트를 "리슨"하고 클릭할 것으로 예상되는 경우 다음과 같은 이벤트 수식자를 추가해야 합니다..native.

따라서 모든 컴포넌트에서 다음을 수행할 수 있습니다.

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

하지만 그건 네가 찾고 있는 게 아니야.태그를 점점 더 추가할 때 또는 간단히 말해서 선택한 항목이 증가할 때 함수를 트리거할 수 있습니다.

이를 위해 vue-multicelect는 이 기능을 통해@input다음 방법으로 처리할 수 있습니다.

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

이제 전화만 해executeLoader다음 인수를 받아들입니다.

methods: {
  executeLoader(selectedItems) {} 
}

언급URL : https://stackoverflow.com/questions/49568169/v-onchange-does-not-work-for-vue-multiselect

반응형