Блог

Главная - Вопросы по программированию - Vue v-модель с выбранным вводом

Vue v-модель с выбранным вводом

#javascript #html #vue.js #drop-down-menu #v-model

#javascript #HTML #vue.js #выпадающее меню #v-модель

Вопрос:

Я пытаюсь установить любой параметр в моем select input в качестве значения в объекте. Я пытаюсь использовать v-model для этой цели, но я не совсем уверен, как это сделать. Ниже то, что я пытался сделать до сих пор.

 <div class="select-wrapper">
  <select required name="category" id="category" @change="(e) => $emit('input', e.target.value)">
      <option value="" selected="selected">Category*</option>
      <option value="attendee">Attendee</option>
      <option value="distributor">Distributor</option>
      <option value="sponsor">Sponsor</option>
      <option value="media/analyst">Media/Analyst</option>
      <option value="university">University</option>
      <option value="other">Other</option>
  </select>
 </div>

Ответ №1:

Нужен prop для привязки выбранного значения и передачи этого prop v-model . Например.

 <template>
  <div>
    <pre>category = {{ category }}</pre>
    <select required name="category" id="category" v-model="category">
      <option value="">Category*</option>
      <option value="attendee">Attendee</option>
      <option value="distributor">Distributor</option>
      <option value="sponsor">Sponsor</option>
      <option value="media/analyst">Media/Analyst</option>
      <option value="university">University</option>
      <option value="nxp">NXP</option>
    </select>
  </div>
</template>

<script>

export default {
  data() {
    return {
      category: null
    };
  }
};
</script>

Редактировать: plunker

Комментарии:

1. Да, но категория в методе данных остается равной нулю. Это не изменится на то, какое значение параметра включено в данный момент. Кроме того, из-за v-model первая опция по умолчанию не отображается в поле выбора

2. @albert_anthony6 Что ты имеешь в виду? она работает так же, как и в плунжере

3. О да, вы были правы. Это была просто опечатка с моей стороны. Все еще сталкиваюсь с проблемой, из-за которой v-model заставляет поле выбора по умолчанию казаться пустым, пока пользователь не взаимодействует с ним. Есть идеи, как это исправить?

4. @albert_anthony6 инициализируйте категорию пустой строкой category: "" , я обновил плунжер

Ответ №2:

Вы должны добавить value prop в свой компонент :

 <div class="select-wrapper">
  <select required name="category" id="category" @change="(e) => $emit('input', e.target.value)">
      <option value="" selected="selected">Category*</option>
      <option value="attendee">Attendee</option>
      <option value="distributor">Distributor</option>
      <option value="sponsor">Sponsor</option>
      <option value="media/analyst">Media/Analyst</option>
      <option value="university">University</option>
      <option value="other">Other</option>
  </select>
 </div>
  
 <script>

export default {
 props:value
};
</script>

и использовать ее в родительском компоненте, например :

 <my-select v-model="category"/>
...
<script>

export default {
  data() {
    return {
      category: ''
    };
  }
};
</script>