뷰 JS V-에 대한 구성 요소 특성

Question

를 통해 반복하지 나는 다음과 같은 설정이 있습니다

JS

var session = { 
    content : { 
     products : { 
      options : { 
       page : 1, 
       productsPerPage : 20, 
       orderBy : 'customPriority', 
       orderDirection : 'asc' 
      }, 
      productList : [ 
        {name: 'a'}, 
        {name: 'b'}, 
        {name: 'c'}, 
        {name: 'd'}, 
      ] 
     } 
    } 
} 


Vue.component('product-list', { 
    props: { 
     options: { type: Object }, 
     products : { type: Array, required: true } 
    } 
}) 

var app = new Vue({ 
    el: '#app', 
    data: session 
}) 

HTML

<div id="app"> 
    <product-list 
     :options="content.products.options" 
     :products="content.products.productList" 
    > 
    <div 
     v-for="product in products" 
    > 
     <h1> 
     {{product.name}} 
     </h1> 
    </div> 
    </product-list> 
</div> 

(jsFiddle : https://jsfiddle.net/Lfw94bgz/1/)

를

내 문제는 v-for 지시어가 작동하지 않는 것처럼 보입니다. 제품 배열이 정의되고 vue-dev-tools에 표시됩니다. this example은 동일한 배열을 반복적으로 처리하는 것처럼 보입니다. prop를 통해 compent).

오류/콘솔에 경고, 나는 확실히 당신의 도움이

Answer 1

내가 주변에 조금 연주하고 작업을 얻었다에 대한 감사를 잃은거야. Here is a working fork of your project. 내가 만든 변경 사항은 <div id="listTemplate"> 인 HTML 섹션에 있으며 제품 목록 구성 요소 선언에 template: '#listTemplate'을 추가했습니다.

Vue 구성 요소에 대한 오해가 있습니다. Vue 구성 요소는 자바 스크립트 및 HTML 코드의 재사용 가능한 세트로 원하는 곳 어디로나 간단히 삽입 할 수 있습니다. 템플릿 내에서 구성 요소가 어떻게 보이는지 정의해야합니다. 그러면 App Vue 인스턴스 내에서 <product-list></product-list>이라고 말하면됩니다.

템플릿이하는 일은 구성 요소 태그가있는 모든 HTML 코드를 정의하는 것입니다. 예를 들어, <product-list></product-list>은 "<div id="listTemplate">의 내용을 복사하여 여기에 붙여 넣으십시오."