VUEJS 根据api响应属性值设置select默认值（显示undefined）

Question

我有一个用户名片列表，显示了用户的一些属性（通过 axios api 调用获得）。单击编辑按钮时，将打开一个编辑页面，并将那些相同的列表项传递到这个新页面，但现在变为文本输入、单选按钮或 select，具体取决于数据。我想在输入中默认显示从上一页传递的数据，然后用户可以根据需要进行编辑。文本输入正确显示数据（来自 api 响应的数据），但我还需要检查单选按钮，如果值为真（如果为假则不检查），以及 select 输入以将原始数据显示为默认值。这里是单选按钮的代码（我使用的是 vue-bootstrap）：

<b-form-radio v-model="profileData.if_bike_owned" value="Y" >
YES
</b-form-radio>
<b-form-radio v-model="profileData.if_bike_owned" value="N">
NO
</b-form-radio>
<b-form-radio v-model="profileData.if_motorcycle_owned" value="Y">
YES
</b-form-radio>
<b-form-radio v-model="profileData.if_motorcycle_owned" value="N">
NO
</b-form-radio>

这里是 select:

<label v-if="profileData.if_motorcycle_owned"  for="select-info-moto">
   Engine:
</label>
 <b-form-select
   name="select-info-moto"
   v-if="profileData.if_motorcycle_owned"
   v-model="profileData.user_motorcycle_characteristic"
   :options="[
      {
         value: null,
         text: 'Choose'
      },
      '50cc',
      '225cc - 250cc',
      '250cc - 500',
      'More than 500cc'
   ]"
/>
<label v-if="profileData.if_cars_owned" for="select-car-power">
Car power
</label>
<b-form-select
  name="select-car-power"
  v-if="profileData.if_cars_owned"     
  v-model="profileData.user_car_powered_by"
  :options="[
   {
      value: null,
     text: 'Choose'
   },
   'Benzina',
   'Diesel',
    'GPL',
   'Hybrid'
 ]" />

我没有使用任何 v-for，输入只是放在 <b-form> 中。我从中获取这些属性的对象 profileData 具有基本结构，例如：

profileData: {…}
  home_address_string: ('Street 1')
  id: (3)
  if_bike_owned: (true)
  if_cars_owned: (true)
  if_motorcycle_owned: (false)
  user_car_powered_by: ('Hybrid')
  user_car_type: ('City car')
  user_motorcycle_characteristic: (250)

有人可以指点我如何处理吗？或者指导我访问一些我可能会丢失的在线资源？我整天都在寻找类似的东西，但是在vuejs中我找不到与我需要的东西相似的东西，而且我不是很有经验的程序员...

非常感谢 x

更新我摆脱了复选框，我只使用 select（即使是或否，它们也可以被 selected）。现在他们都有这个结构：

<b-form-select
 name="select-modello-auto"
 type="select"
 v-if="profileData.if_cars_owned"   
 v-model="profileData.user_car_type"
 :options="[
   {
    value: profileData.user_car_type,
    select: profileData.user_car_type
   },
   'City car',
   'Stationwagon',
   'SUV',
   'Van'
 ]"
/>

在另一个页面中，在同一个应用程序中，这部分：

{
  value: profileData.user_car_type,
  select: profileData.user_car_type
}

完成它的工作，默认正确呈现从 api 响应中获得的属性。我读到 select 值必须等于其中一个选项，因此例如我将 select 更改为 true 和 false，但它不起作用。

Answer 1

由于您的收音机具有 'Y' 和 'N' 的值（不是布尔值），因此您的 v-if 需要与这些值进行比较...例如：

<label v-if="profileData.if_motorcycle_owned === 'Y'"  for="select-info-moto">
   Engine:
</label>

Answer 2

最后，并没有那么难。一段代码解释了我是如何实现的：

<label for="select-if-car">Owns a car?</label>
  <b-form-select
    name="select-if-car"
    type="select"
    v-model="profileData.if_cars_owned"
    :options="boolean"
    required
  />
<label
  v-if="profileData.if_cars_owned"
  for="select-car-type"
>
Select car type
</label>
<b-form-select
  name="select-car-type"
  type="select"
  v-if="profileData.if_cars_owned"   
  v-model="profileData.user_car_type"
  :options="carTypes"
  required
/>

在脚本中：

data(){
  return {
    carTypes: [
        {
          value: null, text: 'Choose an option'
        },
        {
          text:'City car', value: 'CITY_CAR'
        },
        {
          text:'Station wagon', value: 'STATION_WAGON'
        },
        {
          text:'Berlina sportiva', value: 'BERLINA_SPORTIVA'
        },
        {
          text:'Compatta', value: 'COMPATTA'
        },
        {
          text:'SUV', value: 'SUV'
        },
        {
          text:'Van', value: 'VAN'
        }
      ],
      boolean: [
        {
          value: null, text: 'Choose an option'
        },
        {
          text: 'Yes', value: 'true'
        },
        {
          text: 'No', value: 'false'
        }      
      ],
   }
}

使用 v-model="profileData.user_car_type" 我绑定了 api 获得的值（在我的例子中，该对象称为 profileData，我想访问的属性是 user_car_type ).

值得注意的是，我使用了语法

{
  text:'Van', value: 'VAN'
}

因为要使 select 起作用，该值必须与来自 api 请求的值完全相同，并且文本是我们在 [=31] 中实际看到的=].另外，最好提供

{
 value: null, text: 'Choose an option'
},

如果用户选项不在提供的选项中，否则默认第一个选项。希望能帮助别人。谢谢， x

VUEJS 根据api响应属性值设置select默认值（显示undefined）

VUEJS Set select default values according to api response property values (displays undefined)

forms

radio-button

vuejs2

bootstrap-vue

selectinput