Category: Vue

Sometimes, we want to access external JSON file objects in a Vue.js app.

In this article, we’ll look at how to access external JSON file objects in a Vue.js app.

How to access external JSON file objects in a Vue.js app?

To access external JSON file objects in a Vue.js app, we can import the JSON file directly.

For instance, we write

data.json.

[
  {
    firstname: "toto",
    lastname: "jones",
  },
  {
    firstname: "toto2",
    lastname: "jones2",
  },
];

Then we can use it in a component by writing

<script>
import json from "./data.json";

//...
export default {
  //...
  mounted() {
    json.forEach((x) => {
      console.log(x.firstname, x.lastname);
    });
  },
  //...
};
</script>

We import the JSON array with

import json from "./data.json";

And then we call json.forEach to loop through it since json is an array.

Conclusion

To access external JSON file objects in a Vue.js app, we can import the JSON file directly.

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.