Vue.js v-für nicht funktioniert

Question

Ich versuche Vue.js raus, aber ich bin in ein Problem läuft. Ich befolge ein Tutorial bei Laracasts, aber mein v-for funktioniert nicht.

HTML:

<div id="root"> 
    <ul> 
    <li v-for="name in names" v-text="name"></li> 
    </ul> 

    <input type="text" v-model="newName"> 
    <button @click="addName">Add Name</button> 
</div> 

JS:

new Vue({ 
    el: '#root', 
    data: { 
     newName: '', 
     names: ['John', 'Mike'] 
    } 
    methods: { 
     addName() { 
     this.names.push(this.newName); 
     this.newName = ''; 
     } 
    } 
}) 

Fiddle: https://jsfiddle.net/4pb1f4uq/

Wenn es den Link zum Laracast mit Folge hilft,: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/4?autoplay=true

Answer 1

Sie fehlen das Komma nach der data Objekt:

data: { 
    newName: '', 
    names: ['John', 'Mike'] 
}, // comma here 

Answer 2

Sie haben einen einfachen Syntax-Fehler - ein Komma zwischen den „Daten“ fehlen und „Methoden“ Objekte:

data: { 
    newName: '', 
    names: ['John', 'Mike'] 
}, //this comma was missing 

Diese Version Ihrer Geige fügt es und zeigt es funktioniert: https://jsfiddle.net/4pb1f4uq/1/

Sie können diese Art von Sache leicht selbst erkennen, indem Sie in der Konsole Ihres Browsers auf Fehler prüfen (drücken Sie F12). Es wird den Syntaxfehler hervorheben und normalerweise können Sie auf den Fehler klicken und zu der störenden Codezeile gebracht werden.