VueJS Arrays – tips, tricks and examples

Today, We want to share with you VueJS Arrays – tips, tricks and examples.In this post we will show you Simple Time Saving Tips for Vue, hear for How to Create Filters in Vue.js with Examples we will give you demo and example for implement.In this post, we will learn about Tips & Best Practices – vue.js with an example.

VueJS Arrays – tips, tricks and examples

There are the Following The simple About Vue.JS Arrays – tips, tricks and examples Full Information With Example and source code.

As I will cover this Post with live Working example to develop List Rendering and Vue’s v-for Directive, so the vuejs array of objects for this example is following below.

Simple vuejs Tips & Tricks

Example : 1 Deleting Array index in Vue.js
array.splice(index, 1)

remove (index) {
 this.products.splice(index, 1)
}

Example : 2 Vue.delete

remove (index) {
 this.$delete(this.products, index)
}

Example : 3 VueJS Array Mutate

<div id="vue-instance">
  <ul>
    <li v-for="item in members">
      {{ item.name }} - ${{ item.price }}
    </li>
  </ul>
  First item: {{ members[0].name }} - ${{ members[0].price }}<br>
  Second item: {{ members[1].name }} - ${{ members[1].price }}<br>
  <button @click="swap">Swap</button>
  <button @click="swapAndIncrease">Swap and Increase</button>
</div>

var vm = new Vue({
  el: '#vue-instance',
  data: {
    members: [
      {name: 'Jaydeep Air', price: 1000},
      {name: 'Krunal Pro', price: 1800},
      {name: 'Ankit W530', price: 1400},
      {name: 'Dave Dhaval One', price: 300}
    ]
  },
  methods: {
  	swap: function() {
    	var t = this.members[0];
      this.members[0] = this.members[1];
      this.members[1] = t;
    },
  	swapAndIncrease: function() {
    	this.swap();
      this.members[0].price += 100;
    },
  }
});

Example : 4 List Rendering and Vue’s v-for Directive
JavaScript

Vue.component('product-component', {
  template: `  
    <div class="product">
      <div class="box">
        <article class="media">
          <div class="media-left">
            <figure class="image is-64x64">
              <img :src="product.img" alt="Image">
            </figure>
          </div>
          <div class="media-content">
            <div class="content">
              <p>
                <strong>{{product.name}}</strong> <small>{{product.handle}}</small>
                <br>
                {{product.product}}
              </p>
            </div>
              <div class="level-left">
                <a class="level-item">
                  <span class="icon is-small"><i class="fas fa-heart"></i></span>
                  <span class="likes">{{product.likes}}</span>
                </a>
              </div>
          </div>
        </article>
      </div>
    </div>  
  `,
  props: {
    product: Object
  }
});

HTML

<div id="app" class="columns">
  <div class="column">
    <product-component v-for="product in products" :product="product"/>
  </div>
</div>

Vue.js tips and tricks

vuejs Application
HTML Part

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <product-item 
      v-for="product in products" 
      :product="product"
      @toggle="toggle"
      @hook:updated="updated"
     >
    </product-item>
  </ol>
</div>

Vuejs Part

Vue.component('product-item', {
	props: {
  	product: {
    	type: Object
    }
  },
  beforeUpdate () {
  	console.log('lifecycle beforeUpdate hook')  	
  },
  updated () {
  	console.log('lifecycle updated hook')
  },
	template: `
    <li>
      <label>
        <input type="checkbox"
          v-on:change="$emit('toggle', product)"
          v-bind:checked="product.done">

        <del v-if="product.done">
          {{ product.text }}
        </del>
        <span v-else>
          {{ product.text }}
        </span>
      </label>
    </li>
  `
})

new Vue({
  el: "#app",
  data: {
    products: [
      { text: "Learn Magento", done: false },
      { text: "Learn Angular", done: false },
      { text: "Play around in Wordpress", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(product){
    	product.done = !product.done
    },
    updated () {
      console.log('updated in')
    }
  }
})

style part

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Web Programming Tutorials Example with Demo

Read :

• Jobs
• Make Money
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue JS Arrays – tips, tricks and examples.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.