组件模板应该只包含一个根元素。如果您在多个元素上使用v-if,请使用v-else-if来链接它们

时间:2017-11-10 13:53:42

标签: laravel vue.js

请在这里帮我的Form.vue代码

<template>
<div v-if="alert.message" :class="['alert alert-' + alert.type]">
  <p>{{ alert.message }}</p>
</div>
<div class="col-md-4">
   <div :class="['form-group', 'label-floating',{ 'has-error' : errors.city}]">
       <label class="control-label">Kota</label>
       <select @change="city" v-model="state.city" class="form-control" required>
         <option v-for="city in cities" :value="city.kota_id">{{city.kota_nama}}</option>
       </select>
       <span v-if="errors.city" class="label label-danger">
       {{ errors.city[0]}}
       </span>
   </div>
</div>
<div class="col-md-4">
   <div :class="['form-group', 'label-floating',{ 'has-error' : errors.profile}]">
       <label  class="control-label">Tahun</label>
       <select @change="profile" v-model="state.profle" class="form-control" required>
         <option v-for="profile in profiles" :value="profile.profile_id">{{profile.profile_tahun}}</option>
       </select>
       <span v-if="errors.profile" class="label label-danger">
       {{ errors.profile[0]}}
       </span>
   </div>
</div>

我很困惑,我的错误...我试图改变v-show并仍然得到像

这样的错误
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 

1 个答案:

答案 0 :(得分:1)

这意味着你在<template></template>内放置的任何内容都应该在另一个元素中完成。

所以,总是在这些标签中创建一个div,如:

<template>
  <div>
      <!-- put all your code here -->
  </div>
</template>