Радиовход Vue.JS без v-модели - PullRequest
Новая
       12

Радиовход Vue.JS без v-модели

0 голосов
/ 27 июня 2019

У меня есть компонент, который принимает массив объектов опций, имя и v-модель и выдает радиовход с соответствующей меткой для каждой опции в этом массиве опций. 

options = [
    {text: "Option 1", value="option-1" },
    {text: "Option 2", value="option-2" },
]


"updateValue" : function(){
    this.$emit('input', this.$refs.input.value);
}

<template v-for="option in options" >
    <input 
        :value="option.value" 
        :id="name + option.value" 
        :name="name" 
        @input="updateValue()"
        ref="input" />
    <label :for="name + option.value">{{option.text}}</label>
</template>

Я нашел похожий шаблон в этом руководстве , где берется v-модель, а затем значение выводится при просмотре события @input.

Я не могу обернуть голову, как это сделать с помощью радиовхода. Установка :value="value" как, скажем, при вводе текста сделает все значения радио идентичными, что на самом деле не работает.

1 Ответ

1 голос
/ 27 июня 2019

Вот пример действительно примитивного компонента переключателя, который использует v-model для обновления данных при нажатии на запись: 

const radio = {
  props: ['option', 'value'],
  template: `<div @click="onClick">{{ option === value ? 'o' : 'x' }}<slot /></div>`,

  methods: {
    onClick () {
      this.$emit('input', this.option)
    }
  }
}

new Vue({
  el: '#app',

  components: {
    radio
  },

  data () {
    return {
      options: ['red', 'green', 'blue'],
      selectedOption: 'red'
    }
  }
})
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <radio v-for="option in options"
    v-model="selectedOption"
    :option="option"
  >
    {{ option }}
  </radio>
</div>

В этой реализации каждой радиокнопке передается как текущее выбранное значение (через v-model), так и значение для этой конкретной опции (через * 1011).*).Он использует === внутри каждой радиокнопки, чтобы определить, является ли он выбранным в данный момент параметром.

Поддержка Vue для родных радиокнопок описана здесь:

https://vuejs.org/v2/guide/forms.html#Radio

По сути, это то же самое, что и мой пример, за исключением того, что я назвал option, он называет value.Не смущайтесь тем, как он использует v-model и value.В то время как v-model привязывается к value и input по умолчанию, он может быть фактически привязан к любой пропе и событию (см. https://vuejs.org/v2/api/#model). В случае встроенных флажков и переключателей он привязывается к свойству checkedи событие change (упомянутое в https://vuejs.org/v2/guide/forms.html#Basic-Usage).

Обновление:

Я думаю, что я, возможно, неправильно понял ваш вопрос. Мой ответ содержит соответствующую информацию, но это может бытьназад для того, что вы хотите. v-model просто расширяется до реквизита и события, поэтому, если вы хотите заменить v-model чем-то другим, вам просто нужно выяснить, какой реквизит и событие он использует, и использовать их напрямую вместо этого.

...