vue.jsで「The template root requires exactly one element.」とエラーが表示された時は？

目的

vue.jsでとあるアプリを作ってみようとして下記のようなコードを書いていたところ、inputのところにエラーが表示されてしまった

<template>
  <div>
    <button v-on:click="getInfo">メンバー情報を取得</button>
    <div v-for="(member, key) in Members" :key="key">
      <hr>
      <p>{{ member.username }}</p>
      <p>{{ member.gender }}</p>
      <p>{{ member.introduction }}</p>
      <p>{{ member.job }}</p>
      <hr>
    </div>
  </div>
  <input type="text" placeholder="username" v-bind:value="username">
  <input type="text" placeholder="password" v-bind:value="password">
</template>

vue/no-multiple-template-root
Component template should contain exactly one root element.

実施環境

ハードウェア環境

項目	情報
OS	macOS Catalina(10.15.7)
ハードウェア	MacBook Air (11-inch, Early 2015)
プロセッサ	1.6 GHz デュアルコアIntel Core i5
メモリ	4 GB 1600 MHz DDR3
グラフィックス	intel HD Graphics 6000 1536 MB

ソフトウェア環境

項目	情報
homebrew	3.3.8
mysql	Ver 8.0.27 for macos10.15 on x86_64
python	3.8.12
django	3.1.2
anaconda	4.10.1
pip	21.2.4

原因究明

vue/no-multiple-template-root
Component template should contain exactly one root element.

単純にこの文をよく読んでみると、
テンプレートコンポーネントにはroot要素を一つしか含めることができない。と言っている。

つまり

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

このようにtemplateの中にいくつもの要素を入れることができない。

解決

root要素は一つでなければいけないと言うことであるため、

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

このようにtemplateの下のdivを一つにすれば良い。
ちなみに割とtemplateの下にdivタグを入れるのは決まり事のようなものらしい。

<template>
  <div>
    <button v-on:click="getInfo">メンバー情報を取得</button>
    <div v-for="(member, key) in Members" :key="key">
      <hr>
      <p>{{ member.username }}</p>
      <p>{{ member.gender }}</p>
      <p>{{ member.introduction }}</p>
      <p>{{ member.job }}</p>
      <hr>
    </div>
    <input type="text" placeholder="username" v-bind:value="username">
    <input type="text" placeholder="password" v-bind:value="password">
  </div>
</template>

参考

Nuxt.js(Vue.js)で良くある【Component template should contain exactly one root element. 】の対処法