Vue.js v-不工作

-1

我正在嘗試Vue.js，但我遇到了問題。我正在Laracasts上完成一個教程，但是我的v-for不工作。Vue.js v-不工作

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 = ''; 
     } 
    } 
})

小提琴：https://jsfiddle.net/4pb1f4uq/

如果有幫助，有情節的鏈接Laracast：你缺少 https://laracasts.com/series/learn-vue-2-step-by-step/episodes/4?autoplay=true

來源

2017-04-19 S. Kanon

如果您在編譯器中或甚至在您的控制檯中閱讀輸出結果，這可能會有所幫助。它會告訴你，你已經忘記了在定義數據後放置逗號。 –

之後的逗號爲data對象：

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

來源

2017-04-19 08:42:49

嗯，這在我的JSfiddle，但不是我自己的網站......這真的很奇怪。 –

你有一個簡單的語法錯誤 - 一個逗號「數據」和「方法」對象之間的丟失：

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

這是你擺弄的版本增加了它，並將其顯示working：https://jsfiddle.net/4pb1f4uq/1/

您可以通過檢查瀏覽器控制檯中的錯誤（按F12）輕鬆地檢測到這種事情。它會突出顯示語法錯誤，通常您可以單擊該錯誤並將其帶入違規代碼行。

來源

2017-04-19 08:44:02 ADyson

Vue.js v-不工作

回答

相關問題