I am facing an issue where I am trying to dispatch an action and retrieve the values passed into an input field. When I directly dispatch an action on a button, everything works perfectly fine:
<button type="button" @click="store.dispatch("foundJobs", {
nameInputValue: nameFilter.value,
locationInputValue: locationFilter.value,
contractCheckboxValue: contractFilter,
});">Search</button>
However, when I try to encapsulate this functionality in an outer function for better code organization, I encounter an issue where instead of retrieving the values of the inputs, I get the input elements themselves:
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>Can anyone explain why it is behaving this way?