vue.js - 从 vue 的下拉列表中选择选项时填充文本值

问题描述

我有一个vue应用程序和新的vue. 我有一个通过axios endpoint. 这将返回 2 个项目。我要做的是，如果选择了“APC”，则text使用我返回的属性值填充一个值，array但这是我可能想多了的地方。

我的想法是我需要再次迭代这些项目，但如果满足条件则显示该值。

下面是我的整个页面代码

<template>
    <div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="courierList">Courier <span class="text-danger">*</span></label>
            <div class="col-sm-7 shipping-options">
                <select id="courierList" class="form-control" v-model="selectedCourier">
                    <option value='courierDefault'>Please select a courier</option>
                    <option :value="courier.name.toLowerCase()" v-for="(courier, index)  in couriers" :key="courier.index">
                        {{ courier.name }}
                    </option>
                </select>
            </div>
        </div>
        <span v-if="selectedCourier != 'courierDefault'">
            <div class="form-group row">
                <b class="col-sm-3" for="cutOff">Order cut-off</b>
                <div class="col-sm-7 shipping-options" v-for="(cutOff, index)  in couriers" :key="cutOff.index">
                    {{ cutOff.cut_off }}
                </div>
            </div>
        </span>
    </div>
</template>

<script>
    export default {
        name: 'CourierSelect',

        data() {
            return {
                couriers: [],
                selectedCourier: 'courierDefault'
            }
        },

        mounted() {
            this.fetchCouriers();
        },

        methods: {
            fetchCouriers() {
                axios.get('/CHANGED_FOR_SECURITY')
                .then((response) => {
                    this.couriers = response.data.couriers;
                    console.log('axios_couriers', this.couriers)
                })
                .catch((error) => {
                    VueEvent.$emit('show-error-modal', 'cartFethchCouriers');
                    console.log(error);
                });
            }
        }
    }
</script>

我console.log的'axios_couriers'给

然后，当我选择“APC”时，我的页面显示为

但我需要的是Array object仅显示“APC”的“cut_off”值（显示在控制台屏幕截图中）。该值应为 16:30

有没有办法把它作为Computed道具或其他东西？

标签： vue.jsvuejs2

vue.js - 从 vue 的下拉列表中选择选项时填充文本值

问题描述

解决方案

推荐阅读