-2
\$\begingroup\$

enter image description here

I need my h1 to show below my for my checkbox. It is inside of the div. Should I maybe put it outside of the .

The missing is below the Organization Fields header. It is suppose to display below the checkbox input but it is not showing at all. What may cause it to disappear

HTML 

<label name="Organization">Show Organization Data</label>
 <input type="checkbox" :v-model="showOrganizationFields" :true-value="true" :false-value="false">
 <div v-if="showOrganizationFields">
  <h1 class="mb-7 mt-5 ml-6 font-bold text-2xl"> Organization Fields</h1>
  <div v-for="field in requiredOrganizationFields" class="p-8 -mr-6 -mb-6 flex flex-wrap" style="width:150px">
    <label :for="field" type="select" name="field">{{field}}</label>
    <select :id="field" :name="field" v-model="mapping[field]" required>
      <option value="">Please Select</option>
      <option v-for="columnName in columnNames" :name="columnName" :value="columnName"  value="">{{columnName}}</option>
    </select>
  </div>
  </div>
\$\endgroup\$
3
  • 2
    \$\begingroup\$ Welcome to Code Review. Asking for advice on code yet to be written or implemented is off-topic for this site. See What topics can I ask about? for reference. Once you have written working code, you're welcome to ask a new question here and we can then help you improve it! \$\endgroup\$ Commented Mar 11, 2020 at 20:14
  • \$\begingroup\$ It works if I remove the label. Doesn't work If I add a label for the checkbox. I need the label for the input. Can't have an opening and closing input tag \$\endgroup\$ Commented Mar 11, 2020 at 20:23
  • 1
    \$\begingroup\$ Well, regardless, this is not the right place to ask about fixing code. You might check Stack Overflow instead, they specialize in that. \$\endgroup\$ Commented Mar 11, 2020 at 20:39

1 Answer 1

Reset to default
1
\$\begingroup\$

You have to add the tag above the & tags

<h1 class="mb-7 mt-5 ml-6 font-bold text-2xl">Organization Fields</h1>
 <label class="ml-6 mt-6 mb-6 text-medium" name="Organization">Show Organization Data</label>
 <input type="checkbox" :v-model="showOrganizationFields" :true-value="true" :false-value="false">
 <div v-if="showOrganizationFields">
  <div v-for="field in requiredOrganizationFields" class="p-8 -mr-6 -mb-6 flex flex-wrap" style="width:150px">
    <label :for="field" type="select" name="field">{{field}}</label>
    <select :id="field" :name="field" v-model="mapping[field]" required>
      <option value="">Please Select</option>
      <option v-for="columnName in columnNames" :name="columnName" :value="columnName"  value="">{{columnName}}</option>
    </select>
\$\endgroup\$
1
  • \$\begingroup\$ Please do not answer off-topic questions. \$\endgroup\$ Commented Mar 12, 2020 at 11:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.