我想分派一個動作并將值傳遞給輸入。當我直接在這樣的按鈕上發送操作時：
<button type="button" @click="store.dispatch("foundJobs", {
nameInputValue: nameFilter.value,
locationInputValue: locationFilter.value,
contractCheckboxValue: contractFilter,
});">Search</button>
一切正常。但是當我想制作一個外部函式以使其更干凈和可讀時，它不是獲取輸入的值，而是給我一個輸入元素作為輸出：
const nameFilter = ref("");
const locationFilter = ref("");
const contractFilter = ref(false);
<input type="text" placeholder="Filter by title, companies, expertise…" ref="nameFilter"/>
<input type="text" placeholder="Filter by location…" ref="locationFilter"/>
<input type="checkbox" v-model="contractFilter" />
const searchResults = () => {
store.dispatch("foundJobs", {
nameInputValue: nameFilter.value, // console.log shows "input" element
locationInputValue: locationFilter.value, // console.log shows "input" element
contractCheckboxValue: contractFilter, // console.log shows "input" element
});
};
<button type="button" @click="searchResults">Search</button>為什么會這樣？
uj5u.com熱心網友回復：
腳本部分和模板部分的代碼之間的區別在于refs 是在 templates 中展開的。
在模板中撰寫代碼是一種有問題的做法，因為這會破壞關注點的分離并使組件的可維護性降低。
它應該是：
nameInputValue: nameFilter.value.value
的使用unref使意圖更加清晰，并強調value不是在 ref 上而是在某個物件上訪問：
nameInputValue: unref(nameFilter).value
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481871.html
標籤：javascript Vue.js Vuex
上一篇：Vue-高級裁剪器（未捕獲的型別錯誤：this.$refs.cropper.getResult不是函式）
下一篇：在可組合物vue3中使用道具