使用 v-select 下拉菜单作为默认值

Posted 2023-02-22

【中文标题】使用 v-select 下拉菜单作为默认值

【英文标题】：Using v-select dropdown for default value

【发布时间】：2019-09-08 23:55:50

【问题描述】：

我有一个使用 v-select 组件的下拉菜单，并将我的选项设置为“美国”和“加拿大”。

我想设置默认值 (:value) 以读取 customer.country_code，在这种情况下设置为“US”，但它没有预加载的选择。我在类似的情况下使用了 v-select，但不确定我在这里搞砸了什么。

<v-select
   :options="['US', 'CA']"                                   
   :value="customer.country_code"                                       
   v-model="defaultCountry"
</v-select>

v-model defaultCountry 是这样启动的：

data() 
   return 
       defaultCountry: null
  
,

props: 
    customer:  type: Object 

customer.country_code 是一个道具，因此我无法将 v-model 实例化为该值。

【问题讨论】：

使defaultCountry等于customer.country_code

v-model 应该控制值，而不是 :value

在什么时候让 defaultCountry 等于那个值？我不相信在data() 点可以访问该道具

是的，你可以用defaultCountry: this.props.customer.country_code

@DerekPollard Weidddd -- 它不能作为 defaultCountry: this.props.customer.country_code 工作，但作为 defaultCountry: this._props.customer.country_code 工作。为什么会这样？？

【参考方案1】：

dropdown.vue:

<select v-model="country">
  <option value="0">US</option>
  <option value="1">CANADA</option>
</select>

dropdown.js

In data declare this v-model.
country: 0

Then the default value "US" will be preselected in dropdown.

This is my first answer on stack overflow..hope it helps. ThankYou

【参考方案2】：

v-select 和 vuetify 组件一样？

您的 v-model 应该具有值“US”，这将是第一个选择的项目

【讨论】：

是的，vuetify 组件——抱歉。我将通过回复编辑我的问题^