Soy nuevo en VueJs y JS en general, por lo que quizás mi respuesta sea obvia, pero tengo una página en la que me gustaría que solo aparezca un cuadro de entrada de texto cuando el usuario seleccione el tipo de documento 'Escribir individual'. Sin embargo, no estoy seguro de estar escribiendo esto con precisión sintáctica, ya que no me proporciona el comportamiento esperado. ¡Apreciaría consejos sobre cuál es la mejor manera de avanzar!
vista
<template v-if="attachmentAccepted"> <b-field :label="t('document_type')" > <b-select v-model="documentType" icon="file-alt" :disabled="waiting.updateAttachment" > <optgroup v-for="group in allDocumentTypeGroups" :key="group.id" :label="t(group.name)" > <option v-for="type in group.documentTypes" :key="type.id" :value="type.id" > {{(type.name)}} </option> </optgroup> </b-select> </b-field> y aquí es donde realmente he estado luchando, los tipos de documentos parecen recibirse en un JSON, por lo que mi próximo paso sería ver los datos analizados para poder hacer referencia a ellos con precisión en mi declaración v-if, pero siendo nuevo en Vue No tengo ni idea de cómo ver los datos analizados. console.log(this.documentTypes) no ha funcionado.
.then(({data}) => { this.participants = data.participants; this.installmentData = data.installments; this.installmentData = data.installments; this.installmentData.paymentDateStart = moment(data.installments.paymentDateStart).format('YYYY-MM-DD'); this.installmentData.paymentDateEnd = moment(data.installments.paymentDateEnd).format('YYYY-MM-DD'); this.documentTypes = JSON.parse(data.documentTypes); this.formattedDocumentTypes = JSON.parse(data.formattedDocumentTypes); this.loading = false; })editar: accesorios + datos
export default { name: 'AttachmentEditForm', mixins: [AttachmentTypeMixin], components: { DocumentCheckbox }, props: { attachment: Object, slideIndex: Number, }, data() { return { waiting: {}, } },Primero debe definir sus datos en la función de datos:
data() { return { waiting: {}, participants: null, installmentData: { paymentDateStart: null, paymentDateEnd: null, }, documentTypes: null, formattedDocumentTypes: null, loading: false } },Primero, para consolar sus tipos de documentos, ¿por qué no hacer console.log(data.documentTypes) en .then()? Segundo. con respecto al condicional que muestra el campo de texto. Tiene toda la razón sobre el uso de v-if, solo necesita decidir qué valor de tipo de documento se supone que hace que el campo sea visible y verificarlo. A su vez, este tipo de documento se establece seleccionando un elemento de la lista, y debería estar en la sección de datos{}, por cierto (no pude encontrarlo allí). Entonces, algo como esto:
<template v-if="attachmentAccepted"> <b-field v-if="documentType == 'some_value_to_make_this_true'" :label="t('document_type')" > <b-select v-model="documentType" icon="file-alt" :disabled="waiting.updateAttachment" > <optgroup v-for="group in allDocumentTypeGroups" ... export default { name: 'AttachmentEditForm', mixins: [AttachmentTypeMixin], components: { DocumentCheckbox }, props: { attachment: Object, slideIndex: Number, }, data() { return { documentType: null, waiting: {}, } },