Category: Vue Answers

Sometimes, we want to get the index of the item being rendered with v-for in Vue.js.

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

Get the Index of the Item Being Rendered with v-for in Vue.js

We can get the index of the item being rendered with v-for in Vue.js from the 2nd item in the parentheses in v-for .

For instance, we can write:

<template>
  <div id="app">
    <div v-for="(item, index) in items" :key="item.name">
      {{ index }}: {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      items: [{ name: "a" }, { name: "b" }],
    };
  },
};
</script>

to get the item index from the index variable.

Conclusion

We can get the index of the item being rendered with v-for in Vue.js from the 2nd item in the parentheses in v-for .

Sometimes, we want to convert the number input value to a number in Vue.js.

In this article, we’ll look at how to convert the number input value to a number in Vue.js.

Convert the Number Input Value to a Number in Vue.js

We can convert the number input value to a number in Vue.js by adding the number modifier to the v-model directive.

For instance, we can write:

<template>  
  <div id="app">  
    <input v-model.number="quantity" type="number" />  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      quantity: 0,  
    };  
  },  
  watch: {  
    quantity(val) {  
      console.log(val);  
    },  
  },  
};  
</script>

We add the number input with the v-model directive with the number modifier set to quantity to bind the input value to the quantity reactive property.

The number modifier will automatically convert the input value to a number.

And we can see that from the quantity watcher, which should be the number that we typed in.

Conclusion

We can convert the number input value to a number in Vue.js by adding the number modifier to the v-model directive.

Sometimes, we want to set the page title dynamically with Vue.js.

In this article, we’ll look at how to set the page title dynamically with Vue.js.

Set the Page Title Dynamically with Vue.js

We can set the page title dynamically with Vue.js by setting the document.title property to a string.

For instance, we can write:

<template>  
  <div id="app"></div>  
</template>  
<script>  
export default {  
  name: "App",  
  mounted() {  
    document.title = "page title";  
  },  
};  
</script>

We set the document.title to the string with the title content.

And we should see it at the top of the browser tab.

Conclusion

We can set the page title dynamically with Vue.js by setting the document.title property to a string.

Sometimes, we want to use JavaScript maps and sets as reactive properties in Vue.js.

In this article, we’ll look at how to use JavaScript maps and sets as reactive properties in Vue.js.

Make JavaScript Maps and Sets Reactive in Vue.js

We can use JavaScript maps and sets as reactive properties in Vue.js by reassigning them to new values.

To do that, we write:

<template>
  <div id="app">
    <p>{{ mapArr }}</p>
    <p>{{ setArr }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  computed: {
    mapArr() {
      return [...this.map.entries()];
    },
    setArr() {
      return [...this.set.entries()];
    },
  },
  data() {
    return {
      map: new Map([
        ["foo", 1],
        ["bar", 2],
      ]),
      set: new Set([1, 2]),
    };
  },
  mounted() {
    this.map = new Map(this.map.set("baz", 3));
    this.set = new Set(this.set.add(3));
  },
};
</script>

We have the map and set reactive properties which are set to a map and a set respectively.

Then we call this.map.set with the key and value we want to add to the map with the this.map.set method.

And we pass in the returned set into the Map constructor and assign it to the this.map reactive property to update it.

Next, we call this.set.add to add a new entry to this.set .

And then we pass the returned set into the Set constructor and assign it to this.set to update it.

We converted the sets and maps to arrays in the setArr and mapArr computed properties respectively and then render them on the template.

And we that we get:

[ [ "foo", 1 ], [ "bar", 2 ], [ "baz", 3 ] ]

as the value of mapArr and:

[ [ 1, 1 ], [ 2, 2 ], [ 3, 3 ] ]

as the value of setArr .

Conclusion

We can use JavaScript maps and sets as reactive properties in Vue.js by reassigning them to new values.

Sometimes, we want to add refs dynamically in our Vue.js app.

In this article, we’ll look at how to add refs dynamically in our Vue.js app.

Add Refs Dynamically in Vue.js

We can add refs dynamically in our Vue.js app by assigning the ref prop to a dynamic value.

For instance, we can write:

<template>
  <div id="app">
    <p v-for="d of dataArr" :key="d.id" :ref="`element-${d.id}`">{{ d.id }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      dataArr: [{ id: 1 }, { id: 2 }, { id: 3 }],
    };
  },
  mounted() {
    const [el] = this.$refs["element-1"];
    console.log(this.$refs);
    console.log(el);
  },
};
</script>

We set the ref prop of each element to `element-${d.id}` .

Then in the mounted hook, we get the this.$refs object, which is an object with the ref names as the property names and the array of elements as their values.

So we can destructure the first ref by writing:

const [el] = this.$refs["element-1"];

Conclusion

We can add refs dynamically in our Vue.js app by assigning the ref prop to a dynamic value.