Author: John Au-Yeung

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.

Sometimes, we want to delete a property from a data object with Vue.js.

In this article, we’ll look at how to delete a property from a data object with Vue.js.

Delete a Property from Data Object with Vue.js

To delete a property from a data object with Vue.js, we can use the this.$delete method.

For instance, we can write:

<template>
  <div id="app">
    {{ users }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      users: {
        foo: { firstName: "jane", lastName: "smith" },
        bar: { firstName: "john", lastName: "green" },
      },
    };
  },
  mounted() {
    this.$delete(this.users, "foo");
  },
};
</script>

to delete the foo property from the this.users reactive property with the this.$delete method.

The $delete method will trigger Vue’s reactivity to update the this.users object to remove the foo property.

So from the template, we should see that users is now:

{ "bar": { "firstName": "john", "lastName": "green" } }

We can also use the Vue.delete method to do the same thing by writing:

<template>
  <div id="app">
    {{ users }}
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "App",
  data() {
    return {
      users: {
        foo: { firstName: "jane", lastName: "smith" },
        bar: { firstName: "john", lastName: "green" },
      },
    };
  },
  mounted() {
    Vue.delete(this.users, "foo");
  },
};
</script>

We just replace this.$delete with Vue.delete .

Conclusion

To delete a property from a data object with Vue.js, we can use the this.$delete method.

We can also use the Vue.delete method to do the same thing.