vue.js How to get Label from selected Radio Button to show in Preview-CodePudding

I have a form built with bootstrap-vue. The form contains some Radio buttons. I do have a preview button which should show what was selected, but instead of the value from the radio button I would like the label. The radio button code looks something like this:

  <b-form-group label="Location">
  <b-form-radio-group
    v-model="selectedLocation"
    :options="options"
    :aria-describedby="ariaDescribedby"
    name="radio-inline"
  ></b-form-radio-group>
  </b-form-group>

  <b-button variant="primary" @click="handlePreview()"><i ></i> Preview</b-button>

My script looks something like below:

data() {
  return {
    selectedLocation: '1',

    options: [
      { text: 'Location1', value: '1' },
      { text: 'Location2', value: '2' },
      { text: 'Location3', value: '4' }
    ],

methods: {

  handlePreview(){ 
    this.preview = true;
    this.selectedLocationText = this.selectedLocation.text
    console.log(this.selectedLocationText); 
  },

Is that easily possible to get the Text shown in my Preview? I just cant figure it out myself.

CodePudding user response：

I would do something like this:

this.selectedLocationText = this.options.find(option => option.value === this.selectedLocation)

But remember to define selectedLocationText inside data()