@change 不使用 Vue3 组合 API 中的选择标签答案

【问题标题】：@change not working with select tag in Vue3 composition API@change 不使用 Vue3 组合 API 中的选择标签
【发布时间】：2022-11-22 23:57:45
【问题描述】：

我也试过@change和watch。它们似乎都不起作用。

如何检测选择值何时更改？

这是我的代码：

 <select v-model="selected" @change="changeLang()" >
    <option v-for="item in langList" :key="item.text" :value="item.lang">
      {{ item.text }}
    </option>
 </select>

function changeLang()
{
   console.log("Called>>>>");
}

watch(() => selected, (first, second) => {
      console.log(
        "Watch props.selected function called with args:",
        first,
        second
      );
});

【问题讨论】：

您是否尝试过在每件商品上绑定您的v-model？该文档将为您提供 solve it with v-model 的提示，而不是观察者。

标签： javascript vue.js select vuejs3 vue-composition-api

【解决方案1】：

尝试像下面的 sn-p：

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const selected = ref(null)
    const langList = ref([{text:'en', lang: 'english'}, {text:'de', lang: 'deutsch'}, {text:'it', lang:'italian'}])
    
    const changeLang = () => {
      console.log("Called>>>>", selected.value);
    }

    return {
      selected, langList, changeLang
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
  <select v-model="selected" @change="changeLang()" >
    <option v-for="item in langList" :key="item.text" :value="item.lang">
      {{ item.text }}
    </option>
 </select>
</div>

【讨论】：