vue.js 如何从选定的单选按钮获取标签以在预览中显示

Question

我有一个用 bootstrap-vue 构建的表单。该表单包含一些单选按钮。我确实有一个预览按钮，它应该显示所选择的内容，但我想要标签而不是单选按钮的值。单选按钮代码如下所示：

  <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 class="fas fa-clipboard-check"></i> Preview</b-button>

我的脚本如下所示：

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); 
  },

在预览中显示文本是否容易？我就是想不通。

Answer 1

我会这样做：

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

但是记得在里面定义selectedLocationText data()

vue.js 如何从选定的单选按钮获取标签以在预览中显示

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

vue.js

vuejs2

bootstrap-vue