As someone who is new to VueJs and JS, I have a question regarding my page setup. I want a text input box to only be visible when the user selects the document type 'Write Individual'. However, my current syntax seems to be incorrect as it's not displaying the expected behavior. Any advice on how to proceed would be greatly appreciated!
Vue
<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>
My main struggle lies in accessing the JSON data containing document types. I need to view this parsed data so I can effectively use it in my v-if statement. Unfortunately, being new to Vue, I am unsure of how to achieve this. Using console.log(this.documentTypes) hasn't provided me with the desired outcome.
.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;
})
Edit: Props + Data
export default {
name: 'AttachmentEditForm',
mixins: [AttachmentTypeMixin],
components: { DocumentCheckbox },
props: {
attachment: Object,
slideIndex: Number,
},
data() {
return {
waiting: {},
}
},