javascript - 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 的类型为“文本”，我将尝试呈现 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>