Vue 组件只渲染模板 DOM 中的第一个元素

Question

我的网站上的 Vue 循环中有一个 Vue 组件。这是JS文件：

Vue.component('fb-question-text', {
  props: ['question'],
  template:
    '<label>Prompt</label><input type="text" class="form-control" v-model="question.prompt"><a href="javascript:void" class="fb-remove">Remove</a>'
});

var questionList = new Vue({
  el: '#questions',
  data: {
    questions: [
      {
        type: 'text',
        id: 'question1',
        prompt: ''
      },
      {
        type: 'choice',
        id: 'question2',
        prompt: '',
        choices: ['', '']
      }
    ]
  }
});

这是我的 HTML 文件的样子：

<ul id="questions">
    <li v-for="(question, index) in questions">
        <h4>Question {{ index + 1 }}</h4>
        <fb-question-text v-if="question.type === 'text'" :question="question"></fb-question-text>
    </li>
</ul>

如您所见，如果 question.type 是“text”类型，我将尝试呈现 fb-question-text 组件。虽然<li>元素会在页面中呈现，但组件模板不会完全呈现。仅呈现模板内的第一个 DOM 元素（在本例中为<label>元素）。由于<a>某种原因，组件内部的输入框和输入框没有被渲染。当我删除标签时，输入框会被渲染，但之后什么都没有。

有人可以告诉我这是怎么回事吗？

Answer 1

模板必须有一个根元素。

<span>
  <label>Prompt</label>
  <input type="text" class="form-control" v-model="question.prompt">
  <a href="javascript:void" class="fb-remove">Remove</a>
</span>