Category: Vue

Vue 3 — v-model

Vue 3 is in beta and it’s subject to change.

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to use the Vue 3 v-model directive.

Multiline Text

v-model also works with multiline text.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <textarea v-model="message" placeholder="message"></textarea>
      <p style="white-space: pre-line;">{{ message }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            message: ""
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

And when we type in multiple lines of text, it’ll be displayed with the same formatting.

This is because we have the white-space: pre-line; style.

We shouldn’t use interpolation for text areas.

Instead, we always use v-model .

Checkbox

v-model also works with checkboxes.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            checked: true
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

to bind the checked value of the checkbox to the checked state.

We can also have multiple checkboxes bound to the same array:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" value="apple" v-model="checkedFruits" />
      <label>apple</label>
      <input type="checkbox" value="orange" v-model="checkedFruits" />
      <label>orange</label>
      <input type="checkbox" value="grape" v-model="checkedFruits" />
      <label>grape</label>
      <p>{{checkedFruits}}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            checkedFruits: []
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

v-model is smart enough to populate the checkedFruits array with the checked choices.

All we have to do is set the value attribute value and the array variable to bind to v-model and we’re set.

Now when we check or uncheck the checkboxes, the checkedFruits array will change automatically.

Radio

Like checkboxes, Vue 3’s v-model directive can bind to radio button choices.

All we need to have is the value attribute and the v-model directive on each checkbox and Vue will do the selection binding automatically.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="radio" value="apple" v-model="selected" />
      <label>apple</label>
      <input type="radio" value="orange" v-model="selected" />
      <label>orange</label>
      <input type="radio" value="grape" v-model="selected" />
      <label>grape</label>
      <p>{{selected}}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            selected: ""
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

We pass in the selected property returned from data as the value of the v-model directive.

The value attribute as the value of each radio button.

Now when we click on the radio button, we’ll see the value displayed below it.

We can only click one since they’re all bound to the same variable.

Select

v-model also works with select elements.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>apple</option>
        <option>orange</option>
        <option>grape</option>
      </select>
      <p>{{ selected }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            selected: ""
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

We passed the selected value to the v-model so it’ll be updated if we select a value.

If there’s no value attribute in the option, then the text between the option tags will be used as the value.

Conclusion

v-model lets us bind various form control values to Vue instance states.

Vue 3 — More About v-model

Post author By John Au-Yeung
Post date July 26, 2020
No Comments on Vue 3 — More About v-model

Vue 3 is in beta and it’s subject to change.

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to use the Vue 3 v-model directive.

Multiple Select

Select elements that let us do multiple selections work with the v-model directive.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selected" multiple>
        <option disabled value="">Please select one</option>
        <option>apple</option>
        <option>orange</option>
        <option>grape</option>
      </select>
      <p>{{ selected }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            selected: []
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

We have the select element which has the multiple attribute.

The selected variable is a variable instead of a string since it can contain multiple values.

v-model is bound to the selected array so that Vue can get all the selected values and put it in the array.

Now when we choose multiple options from the select box, we can see all of them in an array.

Dynamic Options

We can add dynamic options in the select element.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option v-for="option in options" :value="option.value">
          {{ option.text }}
        </option>
      </select>
      <p>{{ selected }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            selected: [],
            options: [
              { value: "apple", text: "apple" },
              { value: "orange", text: "orange" },
              { value: "grape", text: "grape" }
            ]
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

to render the options with the v-for directive.

option.value is used as the value of each option .

and option.text is used as the value of each text entry.

Value Bindings

Radio buttons and select elements are bound to string with v-model .

Checkboxes are bound to boolean values.

We can use the v-bind directive to bind to types of values that are different from the default.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input
        type="checkbox"
        v-model="toggle"
        true-value="yes"
        false-value="no"
      />
      <p>{{ toggle }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            toggle: ""
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

We added the true-value and false-value props so that the checkbox bind to those values instead of a boolean.

So true is 'yes' and false is 'no' .

That’s what we’ll see when we click the checkbox.

We can do the same thing with radio buttons.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input type="radio" v-model="selected" :value="apple" />
      <label>apple</label>
      <input type="radio" v-model="selected" :value="orange" />
      <label>orange</label>
      <p>{{ selected }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return { selected: "", apple: "apple", orange: "orange" };
        }
      }).mount("#app");
    </script>
  </body>
</html>

We dynamically bound the value with the :value directive instead of setting the value statically.

Since v-model of both radio buttons are set to the same value, we can select between them.

Then their value will be displayed.

Conclusion

Many kinds of form controls work with the v-model directive.

Also, we can bind to their values in different ways.

Vue 3 — Keyboard and Mouse

Post author By John Au-Yeung
Post date July 26, 2020
No Comments on Vue 3 — Keyboard and Mouse

Vue 3 is in beta and it’s subject to change.

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to handle key and mouse events in Vue 3 components.

Key Modifiers

Vue 3 can handle keyboard events.

For instance, we can write:

<input @keyup.enter="submit" />

to run the submit method when the keyup event is triggered by pressing the enter key.

Any valid key name is acceptable as the modifier.

The following key aliases can also be used as modifiers:

.enter
.tab
.delete (captures both "Delete" and "Backspace" keys)
.esc
.space
.up
.down
.left
.right

System Modifier Keys

We can also add modifiers for system modifier keys like Alt and Ctrl.

We can use the following as modifiers:

.ctrl
.alt
.shift
.meta

The meta key is the Windows key on Windows keyboards.

On Sun keyboards, it’s the diamond key.

And on Macs, it’s the command key.

So we can listen to the Ctrl + Enter key combo press on an element by writing:

<input @keyup.ctrl.enter="clear" />

We can also listen to Ctrl + click by writing:

<div @click.ctrl="onCtrlClick">ctrl + click me</div>

`.exact` Modifier

The .exact modifier lets us control the exact combination of system modifiers needed to trigger an event.

For example, if we have:

<button @click.ctrl="onClick">click me</button>

then if alt or shift is pressed, then onClick will also be run.

However, if we have:

<button @click.ctrl.exact="onCtrlClick">A</button>

Then onCtrlClick only runs when we Ctrl + click the button.

Mouse Button Modifiers

Vue 3 also provides modifiers for mouse buttons.

They are:

.left
.right
.middle

for listening to the presses of specific buttons.

Listeners in HTML

Listeners in HTML frees the component code including DOM logic, which is cleaner than having them all in JavaScript.

When the view model is destroyed, all event listeners are automatically removed.

Form Input Bindings

We can use the v-model directive to bind the input value to the state property.

It’s syntactic sugar for updating data on user input events.

v-model ignores the initial value , checked , or selected attributes found in any element.

Only the state in the Vue instances is treated as the source of truth.

Therefore, we should remove those attributes and just set the initial value in the Vue instance.

v-model internally uses different properties and emit different events for different input elements.

Text inputs use value property and input event.

Checkboxes and radio buttons use the checked property and change event.

Select fields use the value as a prop and change as an event.

To use the v-model directive, we can write:

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <input v-model="message" placeholder="message" />  
      <p>{{ message }}</p>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        data() {  
          return {  
            message: ""  
          };  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

We returned an object with the message property so that we can use it with v-model .

Then we render the value of message to show what we entered.

v-model will automatically synchronize the input value and the value of message .

Therefore, when we type something in the box, it’ll be displayed below it.

Conclusion

We can listen to key and mouse events with v-on .

v-model binds the inputted value to the Vue instance state.

Vue 3 — v-for and Components

Post author By John Au-Yeung
Post date July 26, 2020
No Comments on Vue 3 — v-for and Components

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at rendering arrays with v-for .

Methods

We can use methods to render with v-for as long as the method returns an array or an object.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <ul v-for="numbers in sets">
        <li v-for="n in odd(numbers)">{{ n }}</li>
      </ul>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            sets: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]
          };
        },
        methods: {
          odd(numbers) {
            return numbers.filter(number => number % 2 === 1);
          }
        }
      }).mount("#app");
    </script>
  </body>
</html>

to get the odd numbers from each nested array and render them.

The odd method takes a number array and returns an array with the odd ones, so we can use it with v-for .

`v-for` with a Range

v-for can be used to render a range of numbers.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div id="range">
        <p v-for="n in 100">{{ n }}</p>
      </div>
    </div>
    <script>
      const vm = Vue.createApp({}).mount("#app");
    </script>
  </body>
</html>

n in 100 will render a list of numbers from 1 to 100.

`v-for` on a `<template>`

v-for can be used on the template element to let us render a group of items.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <template v-for="p in people">
        <p>{{ p.name }}</p>
        <hr />
      </template>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            people: [
              { id: 1, name: "mary" },
              { id: 2, name: "james" },
              { id: 3, name: "jane" }
            ]
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

We have the p and hr elements rendered in a group in the template tag.

This way, we can render multiple items in a group.

`v-for` with a Component

v-for can be used with components.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <person v-for="p in people" :person="p" :key="p.id"> </person>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            people: [
              { id: 1, name: "mary" },
              { id: 2, name: "james" },
              { id: 3, name: "jane" }
            ]
          };
        }
      });

      app.component("person", {
        props: ["person"],
        template: `
          <p>{{ person.name }}</p>
          <hr />
        `
      });

      app.mount("#app");
    </script>
  </body>
</html>

to create a component called person .

It takes the person prop, which are objects in the people array.

Then we pass in each people entry as the value of the person prop.

The items in the component are rendered as the v-for loop runs.

The data isn’t automatically injected into the component since it makes the coupling tight between the child and the parent component.

Conclusion

We can render arrays and objects returned from methods.

Vue 3 — v-for and Arrays

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at rendering arrays with v-for .

Maintaining State

When v-for re-renders a list, the items are patched in place.

When then items change, the existing items are updated.

However, this means when the items re-render, their state will be cleared.

Therefore, patching is only suitable when we render a list that doesn’t rely on child component state or temporary DOM state.

To let Vue know the identity of an item, we should add a key prop to each rendered item so that Vue can reuse and reorder existing elements.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div v-for="p in people" :key="p.id">
        {{ p.name }}
      </div>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            people: [
              { id: 1, name: "mary" },
              { id: 2, name: "james" },
              { id: 3, name: "jane" }
            ]
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

to render a list from the people array.

We passed in a unique ID to the key prop to make sure that the ID stays the same no matter what order the items are in.

Only primitive values should be used as key values.

So we can use strings or numbers like in the example.

Array Change Detection

Vue 3 wraps array mutation methods so they also trigger view updates.

The wrapped methods include:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

They’ll all trigger Vue to update the rendered list when they’re called.

Replacing an Array

Methods that return a new array don’t trigger Vue to update the rendered list because they return a new array.

Therefore, we need to assign the returned array to the original value.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <input v-model="name" @keydown="search" />
      <div v-for="p in people" :key="p.id">
        {{ p.name }}
      </div>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            name: "",
            people: [
              { id: 1, name: "mary" },
              { id: 2, name: "james" },
              { id: 3, name: "jane" }
            ]
          };
        },
        mounted() {
          this.orig = JSON.parse(JSON.stringify(this.people));
        },
        methods: {
          search() {
            if (this.name.length > 0) {
              this.people = this.people.filter(item =>
                item.name.match(new RegExp(this.name, "g"))
              );
            } else {
              this.people = this.orig;
            }
          }
        }
      }).mount("#app");
    </script>
  </body>
</html>

We called the filter method to filter items according to the inputted value.

So we’ve set the returned value to the this.people property so that the new value will be rendered.

Displaying Filtered/Sorted Results

If we want to display filtered or sorted results, we can do this with computed properties.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <p v-for="n in oddNumbers">{{ n }}</p>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            numbers: [1, 2, 3, 4, 5]
          };
        },
        computed: {
          oddNumbers() {
            return this.numbers.filter(number => number % 2 === 1);
          }
        }
      }).mount("#app");
    </script>
  </body>
</html>

to return an array of odd numbers in the computed property oddNumbers .

Then we can render oddNumbers instead of the original number array and using v-if to do the filtering.

Conclusion

We can use computed properties to display filtered values.

Array methods that mutate the array will trigger re-render when they’re called.

Array methods that return the new array will need to have their returned value assigned to an instance variable for them to be rendered.

Multiline Text

Checkbox

Radio

Select

Conclusion

Multiple Select

Dynamic Options

Value Bindings

Conclusion

Key Modifiers

System Modifier Keys

.exact Modifier

Mouse Button Modifiers

Listeners in HTML

Form Input Bindings

Conclusion

Methods

v-for with a Range

v-for on a <template>

v-for with a Component

Conclusion

Maintaining State

Array Change Detection

Replacing an Array

Displaying Filtered/Sorted Results

Conclusion

`.exact` Modifier

`v-for` with a Range

`v-for` on a `<template>`

`v-for` with a Component