0
766
Vistas¿Cómo activar el cuadro de texto según la casilla de verificación marcada y obtener valores del cuadro de texto usando v-model en Vue js y javascript?
Soy nuevo en Vue js. Estoy tratando de hacer un formulario de acción para el resto de la API, pero estoy atascado en este punto.
Mi formulario de acción:
<div class="form-group"> <label class="required"> Social Media </label> <b-form-checkbox value="Facebook" v-model="selected"> FaceBook </b-form-checkbox> <b-form-checkbox value="Instagram" v-model="selected"> Instagram </b-form-checkbox> <b-form-checkbox value="Twitter" v-model="selected"> Twitter </b-form-checkbox> <b-form-checkbox v-on:click="onclick()" v-model="selected" > Other:</b-form-checkbox> <input type="text" class="form-control" :disabled='isDisabled'> <span class="mt-3">Selected: <strong>{{ selected }}</strong></span> </div>Mi instancia de Vue
export default { data() { return { selected: [] }; }Mi salida:
Salida esperada cuando la casilla de verificación 'Otro' está marcada con un valor de entrada de 'Amigos':
Selected: [ "Facebook", "Instagram", "Twitter", "Friends" ]2 Respuestas
Responde la pregunta0
Agregaría un valor a la casilla de verificación 'otro' y solo si está seleccionado, mostraría el campo de entrada.
:disabled="!selected.includes('Other')"Luego agregue una segunda variable de estado y configúrela como modelo v a la entrada.
v-model="other"También podría intentar agregar el 'otro'-String agregar el final de su matriz 'seleccionada', pero creo que sería mucho más confuso.
Edité mis códigos y caja para obtener el resultado deseado agregando un valor calculado.
Hice un codesandbox para mostrar mi solución: https://codesandbox.io/s/funny-zhukovsky-id7vg?file=/src/App.vue
0
Prueba como el siguiente fragmento:
new Vue({ el: '#demo', data() { return { choices: ['Facebook', 'Instagram', 'Twitter'], selected: [], isDisabled: true, other: '' } }, methods: { onclick() { this.isDisabled = !this.isDisabled if(this.selected.length) { this.selected = this.selected.filter(s => s !== this.other) } this.other = '' }, addType() { this.selected.push(this.other) } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div class="form-group"> <label class="required"> Social Media </label> <li v-for="(item, i) in choices" :key="i"> <input type="checkbox" :value="item" v-model="selected" :id="item"> <label :for="item">{{ item }}</label> </li> <input type="checkbox" v-on:click="onclick" > <input type="text" class="form-control" :disabled='isDisabled' v-model="other"> <button v-show="!isDisabled" @click="addType">+</button> <span class="mt-3">Selected: <strong>{{ selected }}</strong></span> </div> </div>