radio-button - component - vue keep alive

componente del botón de radio vuejs

Question

Estoy tratando de hacer que este componente de botón de radio personalizado funcione en vuejs. ¿Cómo verifico el botón de radio con un valor del componente principal? Sé que usas v-model y lo configuras con el mismo valor en uno de los valores de entrada, pero parece que no funciona.

componente: export default Vue.component(''radioButton'', { template, props: [''name'', ''label'', ''id'', ''value''] })

plantilla de componente:

<label class="radio" :for="id">
  <input type="radio" :id="id" class="radio-button" :value="value" :name="name">
   <span class="radio-circle">
  </span>
  <span class="radio-circle__inner">
  </span>
  <span class="radio-button__label">{{ label }}</span>
</label>

html:

<radio-button name="options" id="option-1" label="1" :value="selectedValue" />
<radio-button name="options" id="option-2" label="2" :value="selectedValue" />

Answer 1

Para los botones de opción, debe pasar verdadero o falso para que la propiedad marcada lo preestablezca en algún estado. Alternativamente, su valor en v-model debe ser igual al value del botón de opción para que se compruebe.

En el código de muestra limitado que ha publicado, creo que su etiqueta es el índice de botones como 1 , 2 , 3 y así sucesivamente ... Y creo que desea seleccionar uno de los botones cuando el valor selectedValue coincida con la label de ese botón de opción. Por ejemplo, si selectedValue es 2, entonces quiere que se marque el botón de radio 2.

Suponiendo que lo anterior es correcto, debe hacer un cambio de una línea en su plantilla de componente de radio-button :

<input type="radio" class="radio-button" :value="label" :name="name" v-model="value">

Nota:

1. La label tu botón es el valor para el botón de opción. Esto es lo que esperaría establecer en selectedValue cuando haga clic en un botón de opción en particular.

2. Su value en el componente secundario en realidad está selectedValue value del componente principal, que indica el botón de opción que se elige actualmente. Entonces esto debería entrar en v-model

Entonces, de acuerdo con los documentos en Enlaces de entrada de formulario , su botón de radio se comprobará si la variable del modelo v es igual al valor de ese botón de opción.

Pero ahora hay otro problema: si hace clic en otro botón de opción, espera que el valor selectedValue en el componente principal cambie. Eso no va a suceder porque los props te dan un enlace unidireccional solamente.

Para resolver este problema, debe hacer un $ emitir desde su componente secundario (botón de opción) y capturarlo en el componente principal (su formulario).

Aquí hay un ejemplo de jsFiddle en funcionamiento: https://jsfiddle.net/mani04/3uznmk72/

En este ejemplo, su plantilla de formulario define los componentes del botón de radio de la siguiente manera:

<radio-button name="options" label="1" :value="selectedValue" @change="changeValue"/>
<radio-button name="options" label="2" :value="selectedValue" @change="changeValue"/>

Siempre que el valor cambie dentro del componente secundario, pasará un evento de "cambio" junto con la etiqueta del botón de changeValue() , que se pasa al método changeValue() del componente de formulario principal. Una vez que el componente principal cambia selectedValue , sus botones de radio se actualizan automáticamente.

¡Espero eso ayude!