Vue.js 预先选择VUE2下拉列表

我有一个

vue2

应用程序，我需要预先选择一个

下拉列表

，但就我的一生而言，我无法找到它

我已经在以下方面进行了查看和尝试：

普通HTML

<select ref="courierList" id="courierList" class="form-control" v-model="shippingDetails.selectedCourier" @change="selectedCourierDd">
    <option :value="courier.name" v-for="(courier, i)  in couriers" :key="i">
        {{ courier.name }}
    </option>
</select>

已尝试代码>1

将以下内容添加到

选项中

selected="{{ courier.name === preselectedCourierName ? 'true' : 'false' }}">

v-bind:selected="courier === preselectedCourierName"

在没有
true
/
false

已尝试代码>2

将以下内容添加到
选项中

selected="{{ courier.name === preselectedCourierName ? 'true' : 'false' }}">

v-bind:selected="courier === preselectedCourierName"

下面是

data() {
    return {
        .... OTHER DATA ITEMS
        preselectedCourier: [],
        preselectedCourierName: ''
}

 fetchCouriers() {
     axios.get('/couriers')
         .then((response) => {
             this.couriers = response.data.couriers;
             .... OTHER CODE
             console.log('couriers', this.couriers[0])
             this.preselectedCourier = this.couriers[0];
             this.preselectedCourierName = this.preselectedCourier.name;

             console.log('preselectedCourier', this.preselectedCourier)
             console.log('preselectedCourierName', this.preselectedCourierName)

给予

已尝试代码>3

<option :value="courier.name" v-for="(courier, i)  in couriers" :key="i" :selected="courier.name === 'APC'">



无错误，但下拉列表仍未预选
修复程序位于安装的
挂钩中
设置
选择的
v型

<select v-model="shippingDetails.selectedCourier">

给我我想要的

修复程序在
安装的
挂钩中
设置
选择的
v型

<select v-model="shippingDetails.selectedCourier">

给我我想要的

为什么
快递[0]。姓名
？你已经在循环中了，是不是应该是
信使。名称
？因为Vue警告抛出“信使”没有定义-是否有
信使
和
信使
的打字错误？@kerbh0lz yeh意识到并删除了它。刚刚更新了它，还添加了另一个我尝试过的解决方案try
：selected=“courier.name==this.preselectedCourierName”
为什么
courier[0]。name
？你已经在循环中了，是不是应该是
信使。名称
？因为Vue警告抛出“信使”没有定义-是否有
信使
和
信使
的打字错误？@kerbh0lz yeh意识到并删除了它。刚刚更新了它，还添加了我尝试的另一个解决方案try
：selected=“courier.name==this.preselectedCourierName”