assign value to select in methods in vuejs?

Question

<a-radio-group
  @change="changeName"
  v-decorator="[
                'name',
                { initialValue: 'light' },
                ]"
>
  <a-radio value="iphone">Iphone</a-radio>
  <a-radio value="samsung">Samsung</a-radio>
</a-radio-group>
   

<a-form-item label="Value" :colon="false">
  <a-select placeholder="Select a value">
    <a-select-option></a-select-option>
  </a-select>
</a-form-item>

methods: {
  changeName(event) {
    var value = event.target.value;
    if (value == 'iphone') {
      // I want to assign the select-option the value : 
      //<a-select-option value="ip12">Iphone 12</a-select-option>
      // <a-select-option value="ip13">Iphone 13</a-select-option>
    } else {
      //<a-select-option value="ss10">Samsung note 10</a-select-option>
      // <a-select-option value="ss9">Samsung note 9</a-select-option>
    }
  }
}

How do I change the <a-select-option>s when I select a radio button?

tony19 · Accepted Answer · 2022-07-15 23:32:39Z

2

You can compute the <a-select>'s options based on the <a-radio-group>'s value.

Instead of the change-event handler, use a v-model directive on the <a-radio-group> to store the selected brand, and on the <a-select> to store the selected phone:

<template>
  <a-radio-group v-model="selectedBrand">
    <!-- brands -->
  </a-radio-group>

  <a-select placeholder="Select a value" v-model="selectedPhone">
    <!-- phone options -->
  </a-select>
</template>

<script>
export default {
  data () {
    return {
      selectedBrand: '',
      selectedPhone: '',
    }
  }
}
</script>

Add a computed property for the options to show based on the selected brand:

const PHONE_OPTIONS = {
  iphone: [
    { value: 'iph12', label: 'Iphone 12' },
    { value: 'iph13', label: 'Iphone 13' },
  ],
  samsung: [
    { value: 'ss10', label: 'Samsung Note 10' },
    { value: 'ss9', label: 'Samsung Note 9' },
  ],
}

export default {
  computed: {
    phoneOptions() {
      return PHONE_OPTIONS[this.selectedBrand]
    },
  },
}

Use a watcher on the phone options to automatically select the first one.

export default {
  watch: {
    phoneOptions(value) {
      this.selectedPhone = value?.[0].value
    },
  },
}

Render the phone options:

<a-select-option v-for="opt in phoneOptions" :key="opt.value" :value="opt.value">
  {{ opt.label }}
</a-select-option>

demo

edited Jul 15, 2022 at 23:32

answered Oct 12, 2021 at 23:21

tony19

140k24 gold badges281 silver badges354 bronze badges

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

1 Comment

deskeay Over a year ago

Thank you. That's great. This is the answer I was looking for. It helped with my work

Collectives™ on Stack Overflow

assign value to select in methods in vuejs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related