Category: Vue Answers

Sometimes, we want to loop via v-for X times in a range with Vue.js.

In this article, we’ll look at how to loop via v-for X times in a range with Vue.js.

How to loop via v-for X times in a range with Vue.js?

To loop via v-for X times in a range with Vue.js, we can use the number of times we want to iterate after in or of in v-for.

For instance, we write

<template>
  <div id="app">
    <ul>
      <li v-for="index in 10" :key="index">
        {{ index }}
      </li>
    </ul>
  </div>
</template>

to render 10 li elements by setting v-for to index in 10.

And then we render the index value in the li.

Conclusion

To loop via v-for X times in a range with Vue.js, we can use the number of times we want to iterate after in or of in v-for.

Sometimes, we want to get the v-for index in Vue.js.

In this article, we’ll look at how to get the v-for index in Vue.js.

How to get the v-for index in Vue.js?

To get the v-for index in Vue.js, we can get it from the 2nd parameter.

For instance, we write

<template>
  <div id="app">
    <div v-for="(item, index) in items" :key="item.name">
      {{ index }}: {{ item.name }}
    </div>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      items: [{ name: "a" }, { name: "b" }],
    };
  },
  //...
};
</script>

to render the items array with v-for.

We get the index of each item from index.

Conclusion

To get the v-for index in Vue.js, we can get it from the 2nd parameter.

Sometimes, we want to fix watch not triggering with Vue.js.

In this article, we’ll look at how to fix watch not triggering with Vue.js.

How to fix watch not triggering with Vue.js?

To fix watch not triggering with Vue.js, we should make sure we update object or array contents with this.$set.

For instance, we write

this.$set(this.someObject, 'b', 2)

to update the someObject.b property to 2 and trigger a re-render by calling this.$set with the reactive property, property name, and the value to set for the property respectively.

We can replace the first 2 arguments with arrays and the index of the array entry we want to update also.

Conclusion

To fix watch not triggering with Vue.js, we should make sure we update object or array contents with this.$set.

Sometimes, we want to add a checkbox array in Vue.js.

In this article, we’ll look at how to add a checkbox array in Vue.js.

How to add a checkbox array in Vue.js?

To add a checkbox array in Vue.js, we can for the v-for directive.

For instance, we write

<template>
  <div id="app">
    <div>
      <label>Email</label>
      <input type="text" v-model="user.email" />
    </div>
    <div v-for="role in roles" :key="role.id">
      <label>{{ role.name }}</label>
      <input type="checkbox" v-model="user.roles" :value="role" />
    </div>

    <p>User's selected roels</p>
    {{ user.roles }}
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      user: {
        email: "test@test.com",
        roles: [{ id: 1, name: "Client" }],
      },
      roles: [
        {
          id: 1,
          name: "Client",
        },
        {
          id: 2,
          name: "Admin",
        },
        {
          id: 3,
          name: "Guest",
        },
      ],
    };
  },
  //...
};
</script>

to define the roles reactive property.

We render the roles array into checkboxes with the v-for directive.

The key prop is set to a unique value so Vue can distinguish between the items.

And we add an input with the type attribute set to checkbox inside to render checkboxes.

The value prop is set to the value of each checkbox.

We set v-model to user.roles to bind the checked values to the user.roles reactive property.

So user.roles would have the value prop value of each checkbox.

Conclusion

To add a checkbox array in Vue.js, we can for the v-for directive.

Sometimes, we want to share data between components with Vue.js.

In this article, we’ll look at how to share data between components with Vue.js.

How to share data between components with Vue.js?

To share data between components with Vue.js, we can use the Vue observable library.

For instance, we write

errors.js

import Vue from "vue";

export const errors = Vue.observable({ count: 0 });

to call Vue.observable with an object to create an observable state with the properties inside and export it.

Then we write

<script>
import { errors } from "./path/of/errors.js";
//...

export default {
  //...
  computed: {
    errors: {
      get() {
        return errors.count;
      },
      set(val) {
        errors.count = val;
      },
    },
  },
  //...
};
</script>

to add the errors computed property with a getter and setter.

In the get getter, we return the count value.

And in the set setter, we set the errors.count value to val.

This will be reflected in the components that uses errors.

Conclusion

To share data between components with Vue.js, we can use the Vue observable library.