Populate text value when option selected from dropdown in vue

Question

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

Then when I select 'APC' my page displays as

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?

discolor · Accepted Answer · 2020-06-12 10:33:51Z

1

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.

answered Jun 12, 2020 at 10:33

discolor

1,39610 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zed Home Over a year ago

I would just wrap the form in one for loop and you have access to the currently selected curier at both form element.

discolor Over a year ago

@ZedHome can you spin up a little codesandbox with your example to look at?

Zed Home Over a year ago

Check my answer below. Instead of binding :value="courier.name.toLowerCase()" with v-model="selectedCourier", then using the name to look up cut_off, just bind :value="courier and you have the selectedCourier.cut_off.

Zed Home Over a year ago

and you can selectedCurier.name.toLowerCase() if you need it elsewhere

discolor Over a year ago

welp, my page didn't update on here and I didn't see your answer :( I missed the first v-for loop and thought the select was completely independent from the actual v-for, thus the computed. My bad, sorry!! Murday should then indeed rewrite it to one for-loop and use the current iteration to get the correct cut_off and mark @ZedHome answer as correct. Mine is technically "correct" but his is more appropiate for what you're trying to achieve

Zed Home · Accepted Answer · 2020-06-12 12:03:49Z

0

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>

edited Jun 12, 2020 at 12:03

answered Jun 12, 2020 at 10:51

Zed Home

2061 silver badge6 bronze badges

3 Comments

murday1983 Over a year ago

I wasn't asking about data-binding as I had already got that done, I needed to populate a text value when my select was selected. No idea what you was trying to get at with this but it isn't relevant to my question. I know how to get and display the value of the selected select

Zed Home Over a year ago

The simplified code shows exatly that. You don't need to compute the currently selected object's time property. It is handled with v-model="selected" and v-bind:value="item.time", and displayed.

Zed Home Over a year ago

Updated to bind the whole selected object, and handle initial null value of selected

Collectives™ on Stack Overflow

Populate text value when option selected from dropdown in vue

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related