Populate text value when option selected from dropdown in vue

0
votes

I have a vue app and new to vue. I have a dropdown which is populated via an axios endpoint. This returns 2 items. What I'm trying to do is, if 'APC' is selected, then populate a text value with an attribute value returned in my array but this is where I may be overthinking.

My thinking is that I need to iterate over the items again but if a condition is met display the value.

Below is my whole page code

<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>

My console.log for 'axios_couriers' gives

enter image description here

Then when I select 'APC' my page displays as

enter image description here

But what I need is for the 'cut_off' value (displayed in the console screenshot) for the 'APC' Array object to display only. The value should be 16:30

Is there a way to do this as a Computed prop or something?

2
vue.jsvuejs2

2 Answers

1
votes

As you suggested a computed should indeed work. One way would be:

currentCutOff() {
  return this.couriers.find(c => c.name == this.selectedCourier).cut_off;
}

This tries to find the courier from your array which equals the name of the currently selectedCourier.

0
votes

There is a much simplier solution with vuejs data binding.
Check this code:

const vm = new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          id: 1,
          name: 'AAA',
          time: '14:00'
        },
        {
          id: 2,
          name: 'BBB',
          time: '18:00'
        }
      ],
      selected: null
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">

  <select v-model="selected">
    <option disabled value="null">Please select one</option>
    <option v-for="item in items" v-bind:value="item">
      {{ item.name }}
    </option>
  </select>
  <div>Selected: {{ selected? selected.time : 'nothing selected' }}</div>

</div>