Question

我有一个显示用户的下拉菜单，但在下拉选项中，我还有一个下拉菜单，以便我可以输入用户名（如果不在列表中）。从vue的下拉列表中选择其他选项时，是否可以将v-select转换为v-textfield。

我正在使用vuetify 1.0版

<template>
 <v-form :model='appliances' class="content-padding" ref='pdfInputs'>
   <v-select class="company-size-dropdown"
    :items="users"
    attach
    item-text='name'
    item-value='name'
    v-model="appliances.first_name"
    label="First Name"
    required>
   </v-select>
 </v-form>
<template>

<script>
import moment from 'moment';

export default {
  components: {
      moment
  },
  data () {
    return {
      users: [James, Scott, William, Other],
      appliances: {
        first_name: ''
      }
    }
  }
}
</script>

Answer 1

为什么您不能尝试v-if来切换字段，如

<template>
 <v-form :model='appliances' class="content-padding" ref='pdfInputs'>
   <v-select class="company-size-dropdown" v-if="appliances.first_name!=='Other'"
    :items="users"
    attach
    item-text='name'
    item-value='name'
    v-model="appliances.first_name"
    label="First Name"
    required>
   </v-select>
   <v-textfield v-else v-model="appliances.first_name">
   </v-textfield>
 </v-form>
<template>

Answer 2

我通过在文本框中添加@keyup事件，修改了Rijosh的代码（谢谢，很好）。因此，appliances.first_name仅在用户输入新的名字后按下Enter键时才会更新。

请检查CODEPEN

<div v-if="appliances.first_name!=='Other'">
  <v-select class="company-size-dropdown"
    :items="users"
    attach
    item-text='name'
    item-value='name'
    v-model="appliances.first_name"
    label="First Name"
    required>
  </v-select>
</div>
<div v-else>
  <v-text-field 
    v-model="newItem" 
    label="First Name"
    v-on:keyup.enter="appliances.first_name = newItem">
  </v-text-field>
</div>

在下拉菜单中选择其他时将v-select变成v-textfield

2 个答案: