VueコンポーネントはテンプレートDOMの最初の要素のみをレンダリングします

Question

私のWebサイトの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ファイルは、次のようになります。question.type場合、私は、FB-質問テキストコンポーネントをレンダリングしようとしています、あなたが見ることができるように

<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> 

タイプ "text"である。 <li>要素がページ内でレンダリングされますが、コンポーネントテンプレートは完全にレンダリングされません。テンプレート内の最初のDOM要素（この場合は<label>要素）のみがレンダリングされます。何らかの理由でコンポーネント内にある入力ボックスと<a>がレンダリングされません。ラベルを削除すると、入力ボックスはレンダリングされますが、その後は何も表示されません。

誰かが何が起こっているか教えてもらえますか？

Answer 1

テンプレートには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> 

Answer 2

fb-question-textには1つのルート要素しか指定できません。あなたはdivでそれをラップする必要があります。

Answer 3

<div>template周辺のHTML

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script> 
 
<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>

を追加します。