Tengo un componente de entrada que cuando se registra en el padre, el valor está vinculado a una variable 'texto de búsqueda'. searchText contiene el valor de texto de la entrada de búsqueda. Cuando miro {{searchText}} en la plantilla, la variable se actualizará en consecuencia. También estoy tratando de establecer el valor de la entrada haciendo clic en un botón. Tengo una lista de ubicaciones y cuando selecciono una de las ubicaciones quiero actualizar el valor de la entrada. Mi problema es que aunque el valor {{searchText}} se actualiza de acuerdo con el texto del elemento en el que hice clic, no actualiza el texto en mi entrada.

¿Cómo puedo configurar también el texto de la entrada como el texto del elemento actualizado en el que se hizo clic?

Buscar.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 } },