Блог

Новичок в vuejs. У меня есть компонент vue, который имеет два реквизита массива: страны и данные стран

страны -gt; ['England', 'Germany']

Страновые данные -gt; [ { country: 'England', capital: 'London' } ]

Я могу отобразить выпадающий список, используя массив стран.

 lt;v-autocomplete  v-model="category"  :items="countries"  label="Countries" /gt;  

Как заставить заглавную букву отображаться в редактируемом пользователем текстовом поле, когда соответствующая страна выбрана и доступна в массиве сведений о стране (Англия), или отображать пустое редактируемое пользователем текстовое поле, когда страна недоступна в массиве сведений о стране (Германия)

 lt;v-text-field  class="mr-2"  v-model="countryDetails[i].capital"  label="Capital" /gt;  

Вы должны обработать изменение автозаполнения с помощью прослушивателя, вызывающего метод, который задает значение v-модели текстового поля, если выбор соответствует стране в массиве сведений о стране :

 lt;templategt;  lt;divgt;  lt;v-autocomplete @change="handleChange"  :items="countries"  label="Countries" /gt;  lt;v-text-field class="mr-2"  v-model="selectedCountryCapital"  label="Capital" /gt;  lt;/divgt; lt;/templategt;  

 data() {  return {  selectedCountryCapital : null  } }, methods: {  handleChange(choice) {  const matchingCountry = this.countryDetails.find(details =gt; details.country === choice);  this.selectedCountryCapital = matchingCountry ? matchingCountry.capital : null;  } }