Vue Inline-Template mit v-for - nicht definiert

Ich versuche Vue zu lernen und versuche einen einfachen Test zu implementieren, der Inline-Templates und v-for Loops verwendet.Vue Inline-Template mit v-for - nicht definiert

Wenn ich die folgende Seite lade, erhalte ich den folgenden Fehler und es wird kein Inhalt auf den Bildschirm gerendert.

[Vue warn]: Die Eigenschaft oder Methode "posts" ist nicht für die Instanz definiert, wird aber während des Renderns referenziert. Stellen Sie sicher, dass in der Datenoption reaktive Daten Eigenschaften deklariert sind.

Ich bin ein Anfänger mit Vue, aber jede Hilfe würde am meisten geschätzt werden.

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Vue Test</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

     <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
     <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
    </head> 

    <body> 
     <div id="vue-app" class="container"> 
      <post-list inline-template v-for="(post, index) in posts" :key="post.id"> 
       <div class="post"> 
        <h1>{{ post.subject }}</h1> 
       </div> 
      </post-list> 
     </div> 

     <script> 
      Vue.component('post-list', { 
       data: function() { 
        return { 
         posts: [ 
          { id: 0, subject: 'The first post subject' }, 
          { id: 1, subject: 'The second post subject' } 
         ] 
        } 
       } 
      }); 

      new Vue({ 
       el: '#vue-app' 
      }); 
     </script> 
    </body> 
</html>

Vielen Dank.

Quelle

2017-06-21 Dwight K. Shrute

Ihre v-for muss innerhalb der Vorlage sein. inline-template bedeutet, dass alles innerhalb das Element ist die Vorlage.

die Komponente seiner inneren Inhalt als Vorlage verwenden

v-for nicht innen ist, so dass er versucht, die post-list Komponente für posts auf der Root-Vue suchen iterieren und es ist nicht Dort.

Auch das Iterieren des Wurzelelements würde zu mehr als einem Wurzel führen (was nicht erlaubt ist), also wickelte ich die v-for in eine div.

Vue.component('post-list', { 
 
    data: function() { 
 
    return { 
 
     posts: [{ 
 
      id: 0, 
 
      subject: 'The first post subject' 
 
     }, 
 
     { 
 
      id: 1, 
 
      subject: 'The second post subject' 
 
     } 
 
     ] 
 
    } 
 
    }, 
 

 
}); 
 

 
new Vue({ 
 
    el: '#vue-app' 
 
});

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 
<div id="vue-app" class="container"> 
 
    <post-list inline-template> 
 
    <div> 
 
     <div class="post" v-for="(post, index) in posts" :key="post.id"> 
 
     <h1>{{ post.subject }}</h1> 
 
     </div> 
 
    </div> 
 
    </post-list> 
 
</div>

Quelle

2017-06-21 19:40:39 Bert

Vue Inline-Template mit v-for - nicht definiert

Antwort

Verwandte Themen