CODEWITHSUNDEEP
javascripthtmlvue.js
crxyz
crxyz

Reputation: 988

numbers in li element tag not working with vue.js

when I tried to run this vue code,

<!DOCTYPE html>
<html>
    <head>
        <title>My first Vue app</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="shopping-list">
            <ol id="shopping-list" v-for="item of items">
                <li>{{ item }}</li>
            </ol>
        </div>
        <script>
            var app = new Vue({
              el: "#shopping-list",
              data: {
                items: ["VR Headset", "Some Games"]
              }
            });
        </script>
    </body>
</html>

The output would show that the first item had a 1. in front of it, but the second item also has a one in front of it.

Expected Result: The Expected Result

Actual Result: The Actual Result

Also, notice how the actual result is less compact than the actual result, which I don't like. Help would be greatly appreciated.

Upvotes: 0

Views: 742

Answers (1)

Dekel
Dekel

Reputation: 62676

The v-for loops over elements based on the current element you have the v-for on. In your case - you didn't create multiple <li> elements, but instead you created multiple <ol> elements.

You can change your code to this instead:

<ol id="shopping-list">
    <li v-for="item of items">{{ item }}</li>
</ol>

Upvotes: 2

Related Questions