For Loops

You can also use for loops in Vue, this allows you to make an element for each item in an array.

If statements in vue are used to make sure your element and children elements only exist on the page if a condition is met. The syntax of the vue if statements is the same as normal js meaning you can still use && and || in it.

For loops in vue create a copy of the current element and children for each loop, this means you are able to call an event from a child and pass the data of that loop value into said event.

If you wish to loop through numbers, you want to do v-for="index in 30". This would loop from 1-30

Vue.component('test_component', {
    template: `
        <div>
            <p v-for="test of testArray">{{ test.name }}</p>
        </div>
    `,
    data() {
        return {
            testArray: [
                { name: 'test' },
                { name: 'testOne' }
            ]
        }
    }
});

The output of this on the html page is:

<body>
    <div id="vueApp">
        <div>
            <p>test</p>
            <p>testOne</p>
        </div>
    </div>
</body>

Notice how none of the vue stuff shows up here, that is because vue is practically hidden in runtime

Last modified: 24 November 2023