Vuetify 콤보 상자의 @change를 통해 대상 요소를 전달합니다.

Vuetify 콤보 상자의 @change를 통해 대상 요소를 전달합니다.

타겟 이벤트를 통과시켜야 합니다.updateTags방법.아래 콤보박스는 다음과 같습니다.

전화했을 때comboActivemethod 타겟 이벤트를 얻을 수 있습니다.

KeyboardEvent {isTrusted: true, key: "y", code: "KeyY", location: 0, ctrlKey: false, …}

주의:comboActive콤보 상자의 메서드는 매개 변수를 전송하지 않습니다.comboActive(event)나는 목표 이벤트를 얻을 수 있다.

타겟 이벤트를 내부로 입수할 수 있도록 하고 싶다.updateTags방법.보다시피, 나는 그것을 사용해 보았다.$event하지만 이것은 작동하지 않는다.

HTML:

<v-combobox multiple
  v-model="select[i]"
  append-icon
  small-chips
  deletable-chips
  @keyup="comboActive"
  @paste="updateTags(item,i)"
  @change="updateTags(item,i,$event)">
</v-combobox>

스크립트:

comboActive(event) {
  console.log('active ', event)
  event.target.parentElement.classList.add('saving')
},
updateTags(item, i, e) {
  this.$nextTick(() => {
    this.$nextTick(() => {
      console.log('complete ', item, e)
    })
  })
},

추가할 때$event그@change="updateTags(item,i,$event)"나는 일련의 아이템을 돌려받습니다.콤보박스 자체를 사용하여 다음 중 추가된 클래스를 삭제할 필요가 있습니다.comboActive방법.

를 사용하여 이 문제를 해결하거나color계산된 속성을 추가하고 조건부로 변경합니다.saving에서 갱신합니다.@change핸들러:

   <v-combobox
             :color="color"
         ...
         @change="saving=true"
        ></v-combobox>

대본

 data () {
      return {

        saving:false,
        select: ['Vuetify', 'Programming'],
        items: [
          'Programming',
          'Design',
          'Vue',
          'Vuetify',
        ],
      }
    },
  computed:{
    color(){
      return !this.saving? 'red':'grey'
    }
  },

완전한 예

사용하다e.target입력을 변경합니다.

comboActive(event) {
        console.log('active ', event)
        event.target.parentElement.classList.add('saving')
    },

updateTags(item, i, e) {
            this.$nextTick(() => {
                this.$nextTick(() => {
                    console.log('complete ', item, e);
                    console.log(e.target);
                    e.target.parentElement.classList.remove('saving');
                });
            });
        },

이것은 단순한 컴포넌트에서만 동작합니다.미의 실수.

또 다른 방법은, RADIUS의 RADIUS의Array똑같이indexcomboActive(항목, i) 및 updateTags(항목, i)를 트리거하면 이 어레이가true || false

comboActive(i, event) {
    console.log('active ', event)
    this.isActive[i] = true;
},

updateTags(item, i) {
    this.$nextTick(() => {
        this.$nextTick(() => {
            this.isActive[i] = false;
        });
    });
},

언급URL : https://stackoverflow.com/questions/57629835/pass-the-target-element-through-change-in-vuetify-combo-box