UI - Vue.js中缺少标头

Question

我需要我的h1显示在我的复选框下面。它就在div里面。我应该把它放在外面。

缺少的内容在“组织字段”标题下面。它应该显示在复选框输入下面，但是它根本没有显示。是什么让它消失

<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>

Answer 1

必须将标记添加到&标记之上。

<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>