Problems with v-if in vue

<div v-if="loginType ==="username"">
    <label >username</label>
    <input placeholder="enter your username" key="username-input">
  </div>
  <div v-else>
    <label>email</label>
    <input placeholder="enter your email" key="email-input">
  </div>

as soon as I finish writing the above code, vue-cli has the following error 


./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-f68cdee0","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/DemoIf.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  <div>
  <div v-if="loginType ==="username"">
    <label >username</label>
    <input placeholder="enter your username" key="username-input">
  </div>
  <div v-else-if="loginType ==="email"">
    <label>email</label>
    <input placeholder="enter your email" key="email-input">
  </div>
  </div>
  <buttob @click="changed"></buttob>
  
  - 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.

 @ ./src/components/DemoIf.vue 11:0-362
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Html vue.js
Dec.23,2021

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. The component template should contain only one root element 

<template> 
 <div>
    
 </div>
</template>

as I said upstairs, there can only be one root element in template 

<template> 
 <div v-if="loginType ==='username'">
    ....
 </div>
 <div v-else>
    ....
 </div>
</template>
Change

to 

<template> 
   <div>
     <div v-if="loginType ==='username'">
        ....
     </div>
     <div v-else>
        ....
     </div>
   </div>
</template>

in vuejs, especially after vue2.0, the outermost layer of a component needs to be wrapped with a "root element", otherwise it will make an error, which is not found in this vue1.0. So for the use of v-if in vueJs, if you act directly on the "root element" of a component, you will report an error. It should be changed like this: 

<template> 
 <div v-if="loginType ==='username'">
    ....
 </div>
 <div v-else>
    ....
 </div>
</template> 


<template> 
  <div>
     <div v-if="loginType ==='username'">
    ....
     </div>
  </div>

</template>

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.

this error message has been said. There can only be one root element in template

.

looking at your error message, I feel that it is not the problem of br.
is < buttob @ click= "changed" > < / buttob > is not written in the above div, resulting in two root elements of the page

.

Previous: How is sourcetree's commit list filtered by author?

Next: Navicat is connected to the database of the real server. How do you modify your permissions unilaterally?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e6e822-45fc0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e6e822-45fc0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?