Why can't I get a basic example of working v-for in Vue JS?

Question

I'm trying to get just a simple hello world for v-for. I've googled this for an hour and found various other posts, such as this one to no use.

My HTML:

<ul>
    <li v-for="item in history">
        {{ item }}
    </li>
</ul>

My JS:

new Vue({
    el: '#app',
    data: {
        history: [
            'red','green','blue'
        ],
    },
});

My Output: {{ item }}

Someone please tell me what I'm doing wrong and why I can't get this bare-bones example working. I've tried using arrays and objects, looping using the key attribute, and several other things.

Docs: https://v2.vuejs.org/v2/guide/list.html

EDIT: apologise for the awful title; I had to change it 13 times before SO stopped yelling at me...

EDIT 2: I have the app defined containing the entire body of HTML: <div id="app">, thank you for the answers though : )

EDIT 3: Resolved, I must've had a div tag closed prematurely; commenting it out fixed the code. Thanks for the answers.

I've got the CDN working correctly and the app set up otherwise, I just can't get v-for working. What's wrong with my code? — Justin
– Justin, Commented Aug 15, 2020 at 4:52

tuhin47 · Accepted Answer · 2020-08-15 04:56:55Z

1

Probably you don't define the id app in the HTML section. Here is the working code.

new Vue({
  el: '#app',
  data: {
    history: [
      'red', 'green', 'blue'
    ],
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul id='app'>
  <li v-for="item in history">
    {{ item }}
  </li>
</ul>

answered Aug 15, 2020 at 4:56

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Justin Over a year ago

Thank you for the reply. I have the app defined like so: <div id="app">, containing all other code including my HTML.

soroush · Accepted Answer · 2020-08-15 04:56:56Z

0

You need to have "#app" id in your code like this

<ul id="app">
    <li v-for="item in history">
        {{ item }}
    </li>
</ul>

answered Aug 15, 2020 at 4:56

soroush

7566 silver badges10 bronze badges

1 Comment

Justin Over a year ago

Thank you for the reply. I have the app defined like so: <div id="app">, containing all other code including my HTML.

Collectives™ on Stack Overflow

Why can't I get a basic example of working v-for in Vue JS?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related