VUEJS根据api响应属性值设置选择默认值（显示未定义）

Posted 2023-03-24

【中文标题】VUEJS根据api响应属性值设置选择默认值（显示未定义）

【英文标题】：VUEJS Set select default values according to api response property values (displays undefined)

【发布时间】：2020-01-12 14:13:18

【问题描述】：

我有一个用户卡列表，显示用户的一些属性（通过 axios api 调用获得）。单击编辑按钮时，将打开一个编辑页面，并将这些相同的列表项传递到这个新页面，但现在变成文本输入、单选按钮或选择，具体取决于数据。 我想在输入中显示从上一页传递的数据作为默认值，然后用户可以根据需要对其进行编辑。 文本输入正确显示数据（来自 api 响应的数据），但我还需要检查单选按钮，如果值为 true（如果为 false，则不检查），并且选择输入显示为默认值原始数据。 这里是单选按钮的代码（我使用的是 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>

这里是选择：

<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

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

<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 响应获得的属性。我读到选择值必须等于选项之一，所以例如我将选择的性别更改为真假，但它不起作用。

【参考方案1】：

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

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

【参考方案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 请求的值完全相同，并且文本是我们在 UI 中实际看到的值。另外，最好提供

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

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