In my current setup, I am dealing with an input component that is linked to a variable called 'searchText' in the parent component. This variable stores the text value of the search input. The {{searchText}} in the template updates accurately based on user input. However, I am facing an issue when trying to update the input's value through a button click. Whenever I choose a location from a list, I want the input value to reflect the selected item. Despite the {{searchText}} updating correctly to the clicked item's text, it does not change the input text.
How do I ensure that the input text mirrors the text of the chosen item?
Search.vue
//Template
<div class="location-search-wrapper">
{{searchText}} // This updates both when I type and also when I select the item
<SearchInput :type="'text'"
:value="searchText"/> // Here the value does not update when I click the item
<div v-if="LocationSuggestionBox" class="search-suggestions">
<LocationSuggestionBox :popular-suggestions="popularSuggestions"
:city-list="searchResults"
:select-location="selectLocation"/>
</div>
</div>
//Script:
// Here the value of search text is updated according to the location selected
function selectLocation(location) {
if (location) {
searchText.value = location
}
}
SearchInput.vue
//Template
<input ref="inputField"
:type="type"
:id="fieldName"
:name="fieldName"
:placeholder="placeholder"
v-model="input"
class="form-input"/>
// Script:
const input = ref('');
(function setValueOnCreate() {
if (props.value) {
input.value = props.value;
}
})();
LocationList.vue
//Template
<div class="location-suggestion-box">
<div v-for="(city, i) in cityList"
:key="i"
:value="city"
@click="selectLocation(city)"
class="suggestion-item">
{{ city }}
</div>
</div>
// script:
props: {
cityList: {
type: Array,
required: false
},
selectLocation: {
type: Function,
required: false
}
},