Making a text input conditional on the selection of a specific list item-CodePudding

I'm brand new at VueJs and JS in general, so perhaps my answer is obvious, but I have a page where I would like a text input box to only appear when user selects the document type 'Write Individual'. However, I'm not sure I'm writing this syntactically accurate as it's not providing me with expected behaviour. I'd appreciate tips as to what is the best way forward!

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>

and this is where I've really been struggling, the document types appear to be received in a JSON, so my next step would be the view the parsed data so I can accurately reference it in my v-if statement, but being new at Vue I have zero clue as to how to view the parsed data. Console.log(this.documentTypes) hasn't worked.

.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: {},
    }
  },

CodePudding user response：

You need to first define your data in data function :

    data() {
    return {
      waiting: {},
      participants: null,
      installmentData: {
        paymentDateStart: null,
        paymentDateEnd: null,
      },
      documentTypes: null,
      formattedDocumentTypes: null,
      loading: false
    }
  },

CodePudding user response：

First, to console your documentTypes, why not to do console.log(data.documentTypes) in .then()? Second. regarding the conditional showing the text field. You are absolutely right about using v-if, you just need to decide which documentType value is supposed to make the field visible and check it. In turn, this documentType is set by selecting an item in the list, and it should be in your data{} section, btw (I couldn't find it there). So, something like this:

<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: {},
    }
  },