Category: Vue

Sometimes, we want to filter text input to only accept numbers and a dot with Vue.js.

In this article, we’ll look at how to filter text input to only accept numbers and a dot with Vue.js.

Filter Text Input to Only Accept Numbers and a Dot with Vue.js

We can filter text input to only accept numbers and a dot with Vue.js by checking for keycodes which aren’t numbers and preventing the default action in those case.

The default action would be to accept the input.

For example, we can write:

<template>  
  <div id="app">  
    <input v-model="num" @keypress="isNumber($event)" />  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  data() {  
    return {  
      num: 0,  
    };  
  },  
  methods: {  
    isNumber(evt) {  
      const charCode = evt.which ? evt.which : evt.keyCode;  
      if (  
        charCode > 31 &&  
        (charCode < 48 || charCode > 57) &&  
        charCode !== 46  
      ) {  
        evt.preventDefault();  
      }  
    },  
  },  
};  
</script>

to add a number input and the isNumber method which we set as the value of the @keypress directive to check the keys that are pressed.

We get the keyboard key character code from the evt.which or evt.keyCode property.

Then we check if the charCode is the ones listed in the condition in the if statement.

If they match, then we call evt.preventDefault to stop the default action, which is to accept the inputted value.

Conclusion

We can filter text input to only accept numbers and a dot with Vue.js by checking for keycodes which aren’t numbers and preventing the default action in those case.

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.