Как использовать вход с радиопередачей для выбора одного из таких входов - PullRequest
0 голосов
/ 01 июля 2019

Из документации по 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>

И получите этот ввод:
input with radio prepend

Я хочу сделать компонент, чтобы выбрать одно из 2 или более значений на основе этого ввода. Например,

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

Но в документации сказано:

Примечание: вы должны использовать собственные радио и чекбоксы, так как и включить дополнительную разметку, не требуется при вводе группы.

Как я должен использовать код из документации, чтобы установить v-модель и опции, чтобы она работала как задумано.

1 Ответ

0 голосов
/ 02 июля 2019

Если кому-то интересно, решение будет таким:
Дочерний компонент

<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>
...