Vue 3在v-select notwoking中的更改事件[重复]

y53ybaqx  于 2023-04-21  发布在  Vue.js
关注(0)|答案(2)|浏览(187)

此问题已在此处有答案

Vuetify 3 change event in v-select(1个答案)
2天前关闭。
我正在使用vue 3,我不知道为什么我不能看v-select的变化
有人能帮忙吗多谢了
我尽力了

//test
Ex 1 :<VSelect
    v-model="test"
    :items="items_status"
    @update:data.status="changeSelecterStatus"
    @input="changeSelecterStatus"
    @change="changeSelecterStatus"
    on-change="changeSelecterStatus"
    v-on:change="changeSelecterStatus"
    v-on:input="changeSelecterStatus"
    v-change="changeSelecterStatus()"
    item-title="state"
    item-value="abbr"
    label="Select"
    persistent-hint
    return-object
    single-line
/>

只有v-change可以工作,但是它只在changeSelecterStatus()not working以及changeSelecterStatus的情况下工作如果我使用v-change=“eventMethod()“它会给予我一堆事件,因为在初始化组件时它已经加载了数据更改API所以当我什么都不做的时候,它已经运行了x2,我拥有的总数据的总事件。这里我使用选择器来处理for循环生成的多列数据,所以每次我改变任何选择器时,它都会给予我一系列的事件,执行次数=页面上选择器的总数

Ex 2: <VCol
   v-for="data in datas"
   :key="data.id"
>
<VSelect
    v-model="data.status"
    :items="items_status"
    @update:data.status="changeSelecterStatus"
    @input="changeSelecterStatus"
    @change="changeSelecterStatus"
    on-change="changeSelecterStatus"
    v-on:change="changeSelecterStatus"
    v-on:input="changeSelecterStatus"
    v-change="changeSelecterStatus"
    item-title="state"
    item-value="abbr"
    label="Select"
    persistent-hint
    return-object
    single-line
/>
//same
<v-select v-model="data.status" 
@update:data.status="changeSelecterStatus"
    @input="changeSelecterStatus"
    @change="changeSelecterStatus"
    on-change="changeSelecterStatus"
    v-on:change="changeSelecterStatus"
    v-on:input="changeSelecterStatus"
    v-change="changeSelecterStatus()"
:items="items_status" item-title="state" item-value="abbr" label="Select" return-object single-line>
    <template v-slot:selection="{ item }">
        {{ getTextFromCodeStatus(item) }}
        </template>
    <template #item="{ item, props }">
        <v-list-item v-bind="{ ...props, title: undefined }">
            {{ item.title }}
        </v-list-item>
    </template>
</v-select>

changeSelecterStatus: function(){
    console.log("task");
},

v-change="changeSelecterStatus()" 
-> onload component : return task(data.lenght*2 time)
-> try to choose an option : return task(data.lenght*1 time)

更新:似乎像v-change可以正常工作,如果它可以确定正确的数据的基础上的数据.状态和关键是其data.id,因为函数的次数是运行=选择器的数量与v-model=“v-model的选择器”

Ex1 -> load component : return 1 tỉme because 'test' specified at default data does not have to be loaded from the api
Ex2 
-> onload component : return task(data.lenght*2 time)
-> try to choose an option : return task(data.lenght*1 time)
hc8w905p

hc8w905p1#

根据Vuetify库,我们不能期望触发更改事件。
VSelect

component offer @update:modelValue event to listen to options modifications. 

<template>
  <v-app>
   <VCol v-for="data in datas" :key="data.id">
     <VSelect
       chips
       label="Testing"
             v-model="data.status"
      :items="data.items"
      @update:modelValue="onValueChange"
     ></VSelect>
   </VCol>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const datas = ref([{id: 1, status: 1, items:[1,2,3]}, {id:2,  status: 2, items:[1,2,3]}, {id:3,  status: 3, items:[1,2,3]}]);
  
function onValueChange(v) {
  console.log("Value updated ", v)
}
</script>

你可以在下面的VuetifyPlayground找到相同的。
https://play.vuetifyjs.com/#eNqlVE1v4jAQ/SsjXwpSPhbYU5ZWrPgJu+oFc3CTAbxNbMt2sqoQ/33HdmCB9lCpyiEznjfz5j1H2RzZT2OKoUdWsaXHzrTC4xNXAMshF8bEEJbPa93CkO+0feSsEV6AVBDejjOoXvFtPC5kw1nqCV2/sMXajylAfZDGXbJWvGBLfb/Rean2nHHFfXiIqNNNrMWZzgvfE9G5s5K0qLswhuR/cdUbOsYqTngWbY8E1CpG64NQe7xgn5bluOGosgwyk/jyrH5ZXrlCqautNB4c+j6UZWe09XAEizs4wc7qDh7IzocArrVyPtkEjwEx2RxlU8Esg6QphlFAtZll82yxPWUQIPMMLhCKP4IsriAU30K20x9BBle7XtVeagU3FkyGKRwDIGyoWyxavZ9wFhGQDGyAswyGKVenYEKSTYJZxpLmvBOm+OO0oi8nzuJjgS6jStPDGXkRcs4O3htXlWXdKGqjy5GDLRT6UpmuXBGstL3yssO80d1qUSyKb7lozUEUs3nZSOev6wW6Ln+x+q9DS9No1Ss+L3dvn+AckUQ1K2bfE8V4ltO36QLHu9klEQ5oc4uqQYv2s9ru2j7Ud4d5pzGsQZdxoitopXp1d+7XLjq/OW/7NfFxWhi1TYxr3Z3/E+yUsdv9qZ4Gse0/q/5syg==

rqenqsqc

rqenqsqc2#

没有本机v-changeVue Directive
但它起作用了,因为你有

@change="changeSelecterStatus"
v-on:change="changeSelecterStatus"

做着同样的事情:@v-on的快捷方式,因此@change = v-on:change
v-changeon-change不起作用,不执行任何操作。
把这些都换掉

on-change="changeSelecterStatus"
v-on:change="changeSelecterStatus"
v-on:input="changeSelecterStatus"
v-change="changeSelecterStatus()"

@change="changeSelecterStatus"

这足以捕获onChange事件。

相关问题