DEV Community

loading...
Cover image for Vue.js 101 - Event object, v-for and v-bind

Vue.js 101 - Event object, v-for and v-bind

Eric The Coder
Businessman and blogger #Javascript, #Python and #PHP. My favorite frameworks are #Nextjs, #Laravel, and #Django. I am also a fan of #TailwindCSS
・3 min read

Follow me on Twitter: Follow @justericchapman

Everyday I publish what I learn the day before from my Vue.js course.

Click follow if you want to miss nothing.

Without further ado here is a summary of my notes for that day.

Event object

Take all those different events:

<button @click="changeMessage">Change message</button>
<button @dblclick="changeMessage">Change message</button>
<button @mousemove="changeMessage">Change message</button>
Enter fullscreen mode Exit fullscreen mode

Each of those events have an attach event object attach to the method.

The event object can be retrieve in Vue code by adding a referencing parameter. That parameter can be name "event" or just "e" or anything else:

methods: { 
    changeMessage(e) {
        console.log(e, e.type) 
    } 
}
Enter fullscreen mode Exit fullscreen mode

In that case it's a click event so the e.type will be equal to 'click' and the e object will contains many properties like:
e object

We can then use this object and all his properties to change the component behaviour.

But want if we want to pass a custom parameter to our event?

<button @click="changeMessage('New message'">Change message</button>
Enter fullscreen mode Exit fullscreen mode

In that case Vue will not pass the event as default. If we want both, we have to tell Vue to pass the event as a parameter and that need to be specified with a special dollar sign name ex.: $event

<button @click="changeMessage($event, 'New message')">Change message</button>
Enter fullscreen mode Exit fullscreen mode

Both will then be available in our Vue code

methods: { 
    changeMessage($event, message) {
        this.message = message
        console.log($event) 
    } 
}
Enter fullscreen mode Exit fullscreen mode

Let's do an example that will contains those concept put all together.

First in index.html let's create a box with border and padding

<div style="border-style: solid; padding:8px;">
    Box 
</div>
Enter fullscreen mode Exit fullscreen mode

Then let's add a event that will show the mouse cursor position:

<div @mousemove="displayPosition" style="border-style: solid; padding:8px;">
    Box position {x} , {y}
</div>
Enter fullscreen mode Exit fullscreen mode

Add those line in app.js:

data() {
    return {
        x: 0,
        y: 0
    }
},
methods: { 
    displayPosition(e) {
        this.x = e.offsetX
        this.y = e.offsetY
    } 
}
Enter fullscreen mode Exit fullscreen mode

Display a list using v-for directive

First let's create a people list (array):

data() {
    return {
        people: [
            { name: 'Mike Taylor', email: 'mike@example.com'},
            { name: 'John Carson', email: 'john@example.com'},
            { name: 'Peter Sanders', email: 'peter@exemple.com'}
        ],
    }
},
Enter fullscreen mode Exit fullscreen mode

To display that list we can use the v-for directive. This directive will loop through each element of the array.

<div id="app">
    <div v-for="person in people" :key="person.name">
        {{ person.name }} : {{ person.email }}  
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The "person" variable can be any name. The :key binding is a unique identifier for Vue internal processing. We will learn more about attribute binding next.

Binding html attributes

Html as many possible attributes. For example an image tag have a src attribute, an a tag have a href attributes:

<div>
    <img src="http://example.com/test.jpg">
    <a href="http://example.com">Click here</a>
</div>
Enter fullscreen mode Exit fullscreen mode

It is possible to make those attributes dynamic by binding those attributes to a javascript expression.

The syntax is to use the v-bind directive:

<div>
    <img v-bind:src="image_url">
    <a v-bind:href="link_url">Click here</a>
</div>
Enter fullscreen mode Exit fullscreen mode

Those attributes are now dynamicaly bind to vue.js data or expression

data() {
    return {
        image_url: 'http://example.com/testjpg',
        link_url: 'http://example.com'      
    }
Enter fullscreen mode Exit fullscreen mode

We can also use the shortcut (only colon :) syntax for v-bind directive:

<div>
    <img :src="image_url">
    <a :href="link_url">Click here</a>
</div>
Enter fullscreen mode Exit fullscreen mode

Conclusion

That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: Follow @justericchapman

Discussion (0)

Forem Open with the Forem app