vue create data array code example

Example 1: reading data from array vue

//if we have an array of objects like this :
features: [{
                    title: 'Create blacklists',
                    text: 'Ensure .',
                    src: require("@/assets/images/icon-blacklist.svg"),
                    imgAlt: 'Create blacklists'
                },
                {
                    title: 'Plain text snippets',
                    text: 'Remove .',
                    src: require("@/assets/images/icon-text.svg"),
                    imgAlt: 'Plain text snippets'
                },
                {
                    title: 'Sneak preview',
                    text: 'Quick .',
                    src: require("@/assets/images/icon-preview.svg"),
                    imgAlt: 'Sneak preview'
                }

            ]
            
//we can display this data with an v-for
   <b-col xs="12" sm="4" md="4" lg="4" v-for="feat of features" v-bind:key="feat.title">
            <img :src="feat.src" :alt="feat.imgAlt">

            <h4>{{feat.title}}</h4>
            <p>{{feat.text}}</p>
   </b-col>

Example 2: vue js set array value by key

// Doing like this will only update the data
// But will not reactive to the DOM
this.items[index] = val;

// In order to make it reactive to the DOM
// Do it like this
this.$set(this.items, index, val)