Question

bootsrap-vue的文档中（基于bootstrap 4）：

<b-input-group>
  <b-input-group-prepend is-text>
    <input type="radio" aria-label="Radio for following text input">
  </b-input-group-prepend>
  <b-form-input aria-label="Text input with radio button"></b-form-input>
</b-input-group>

并获得以下输入：

我想做一个组件根据此输入选择2个或多个值之一。例如，

selectedValue: null,
compareOptions: [{text: "Value1", value: option1}, {text: "Value2", value: option2}]

但是文档说：

注意：您必须使用本机广播和复选框输入，例如并包含输入中不需要的其他标记组。

我应该如何使用文档中的代码来设置v模型和选项，以使其按预期工作。

Answer 1

如果有人感兴趣，解决方案是：
子组件

<template>
  <b-container fluid>
    <b-form-group
      :label="formLabel"
      class="mb-1"
      label-class="text-center">
      <b-row>
        <b-col class="pl-2 pr-1">
          <b-input-group
            size="sm"
            сlass="mb-1">
            <b-input-group-prepend is-text>
              <input
                v-model="selectedValue"
                :value="oldValue"
                type="radio"
                @change="sendSelected">
            </b-input-group-prepend>
            <b-form-input
              :value="oldValue"
              @input="changeValue('old', $event)" />
          </b-input-group>
        </b-col>
        <b-col class="pl-1 pr-2">
          <b-input-group
            size="sm"
            class="mb-1">
            <b-input-group-prepend is-text>
              <input
                v-model="selectedValue"
                :value="newValue"
                type="radio"
                @change="sendSelected">
            </b-input-group-prepend>
            <b-form-input
              :value="newValue"
              @input="changeValue('new', $event)" />
          </b-input-group>
        </b-col>
      </b-row>
    </b-form-group>
  </b-container>
</template>

<script>
export default {

  props: {
    value: {
      type: Object,
      required: true
    }
  },

  data () {
    return {
      selectedValue: null
    }
  },

  computed: {
    newValue () {
      return this.value.new
    },

    oldValue () {
      return this.value.old
    },

    formLabel () {
      return this.value.label
    }
  },

  created () {
  },

  methods: {
    sendSelected () {
      this.$emit('change', this.selectedValue)
    },

    changeValue (path, event) {
      this.selectedValue = null
      this.emitMutationEvent(path, event) //custom event
    }
  }
}
</script>

父组件

<template>
  <b-container fluid>
    <compare-component
      v-for="documentField in documentFields"
      :key="documentField.id"
      :value="documentField"
      @change="setSelectedValue(documentField, ...arguments)"
      @mutate="editOriginValues(documentField, ...arguments)" />
  </b-container>
</template>

<script>
import CompareComponent from './CompareComponent'

export default {
  components: {
    CompareComponent
  },

  mixins: [PropMutationEventMixin],

  data () {
    return {
      reviewDocument: null,
      newSessionDocument: null,
      oldSessionDocument: null,
      documentFields: [
        {
          id: 1,
          old: 'old value 1',
          new: 'new value 1',
          label: 'value1',
          selected: ''
        },
        {
          id: 2,
          old: 'old value 2',
          new: 'new value 2',
          label: 'value 2',
          selected: ''
        },
        {
          id: 3,
          old: 'old value  3',
          new: 'new value 3',
          label: 'value 3',
          selected: ''
        }
      ]
    }
  },

  methods: {
    setSelectedValue (documentField, event) {
      documentField.selected = event
    },

    editOriginValues (documentField, path, newValue) {
      documentField[path] = newValue
    }
  }
}
</script>

如何在收音机前面使用输入以选择某些此类输入之一

1 个答案: