After searching for a simple "hello world" example of using v-for in Vue.js, I have spent an hour looking at various posts, like the one on Stack Overflow, but still no luck.
This is my HTML:
<ul>
<li v-for="item in history">
{{ item }}
</li>
</ul>
This is my JavaScript:
new Vue({
el: '#app',
data: {
history: [
'red','green','blue'
],
},
});
This is the output I am getting:
{{ item }}
https://i.sstatic.net/c0cqC.png
I would appreciate any help in figuring out what I am doing wrong and why this basic example is not working. I have tried different approaches with arrays, objects, and key attributes without success.
Refer to the documentation here: https://v2.vuejs.org/v2/guide/list.html
EDIT: I apologize for the multiple title changes I had to make before posting this question.
EDIT 2: Just to clarify, I have the app defined with the entire body of HTML enclosed within <div id="app">.
EDIT 3: Issue resolved - it seems I had inadvertently closed a div tag prematurely, commenting it out fixed the code. Thank you for the responses.