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

Admin 1
Viewed 48

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 behavior. 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: {},
    }
  },
vuejs2 vue.js javascript
2 Answers

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
    }
  },
user_119891890

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