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 파일 모습입니다 같은 : 당신이 볼 수 있듯이, 나는 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> 

"텍스트"유형입니다. <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> 

Answer 2

는 귀하의 fb-question-text는 하나 개의 루트 요소를 가질 수있다. 당신은 div에 그것을 포장해야합니다.

Answer 3

<div>

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>

HTML template 주위에 추가