Boucle de vue - ne fonctionne que sur #id mais pas sur .class?

Question

J'ai deux ensembles d'éléments HTML à rendre avec les mêmes données, donc j'utiliser classe sélecteur:

<ul class="example-1"> 
    <li v-for="item in items"> 
    {{ item.message }} 
    </li> 
</ul> 

<div class="example-1"> 
    <div v-for="item in items"> 
    {{ item.message }} 
    </div> 
</div> 

Mon code Vue:

var example1 = new Vue({ 
    el: '.example-1', 
    data: { 
    items: [ 
     { message: 'Foo' }, 
     { message: 'Bar' } 
    ] 
    } 
}) 

Il boucles que la première série de html (ul/li) mais pas le second ensemble (div).

Des idées pourquoi?

Comment puis-je le faire pour les deux? J'ai modifié le code ci-dessus de here qui utilise #id.

Answer 1

Ce que votre code essaie de faire est de configurer la même variable d'instance de Vue deux endroits distincts sur la même page et cela ne fonctionnera pas. Vous devez placer tout votre code de vue dans un élément environnant avec un identifiant. Vue démarre son instance sur cet élément pour réagir à tout le code en dessous. Si vous changez votre code à quelque chose comme ce qui suit, il fonctionnera:

<div id="example-1"> 
    <ul class="example-2"> 
    <li v-for="item in items"> 
     {{ item.message }} 
    </li> 
    </ul> 
    <div class="example-1"> 
    <div v-for="item in items"> 
     {{ item.message }} 
    </div> 
    </div> 
</div> 

var example1 = new Vue({ 
    el: '#example-1', 
    data: { 
    items: [ 
     { message: 'Foo' }, 
     { message: 'Bar' } 
    ] 
    } 
}) 

Et voici un stylo travail: https://codepen.io/egerrard/pen/GMBKRX

Si vous vouliez deux instances distinctes, vous pouvez le faire, mais vous auriez besoin de créer deux new Vue() cas comme dans l'enclos suivant:

https://codepen.io/egerrard/pen/XeBrdp