Blog: JS

Setting up two-way binding for a component in Vue

Published

I’ll be blunt: I am head-over-heels in love with VueJS. It has totally changed my approach to front end development, and increased reusability, while also decreasing development time – and heck, reactive data is bloody awesome.

This one is about binding to a custom component. I’m writing so many components these days, and this is just one little point I guess I overlooked? Assumed? Just didn’t actually consider? Not sure which… but it did lead me to Google.

So I thought I’d share this basic reminder that, even after months developing with VueJS and no doubt having come across this earlier, I’d somehow forgotten to remember for this instance.

Let’s say you’re wanting to make a component, and take advantage of two way binding using v-model when you use your component, as:

<my-component v-model="data"></my-component>

That’s easy, hey – and I definitely remembered that I needed to emit an “input” event to send data from the component back to the “data”, such as:

this.$emit('input', value);

So far, I’ve got my working component that is able to do its internal logic and operations, and then when the certain action is triggered, outputs the current value back to the parent using the $emit call. Brilliant.

But wait… I also need to pass some initial data in to the component too – aka, how do I set a default for my data… aka what do I need to refer to within the component to access what v-model is passing.

That’s a fun thing to try to Google, with such vague phrasing and generic words.

One of the things I love about Vue are the shorthand ways to write things – why use v-bind:prop="value" when I can just use :prop="value"?

It’s less to type, and easier to read. And I know that :prop is passing a property to the component with the set “value”. Easy.

It’s funny to use that example actually, as that’s part of the lesson here.

v-model is a shortcut too – a shortcut for a v-bind, and a v-on.

<my-component v-model="data"></my-component>

is exactly the same as writing

<my-component v-bind:value="data" v-on:input="data = $event.target.value"></my-component>

But seriously, look at the difference in:

  1. readability, and
  2. length of code needed

Which would you pick when writing code? I know my answer, definitely.

v-model is just so much neater to use – and there in lies the key: my component needs to have a prop defined called ‘value’, as that is what v-model is sending as the value to the component.

So a really basic setup for the logic for a component could be:

{
    // ...
    props: {
        value: {
            type: String,
            default: '',
            required: true
        }
    },
    data: function () {
        return {
            data: '' // store the data
        };
    },
    methods: {
        myOtherOperations: function(){
            //
            // perform some other behavior or interaction internally
            //
            // when ready, trigger the output.
            this.output();
        },
        output: function () {
            // pass back to the parent
            this.$emit('input', this.data);
        }
    }
    // ...
}

When you’re ready, simply call the “output” method and it will emit the “input” for v-model to pick up on.

I just love the magic around this – the in-bound prop of “value” and the out-bound emit of “input” – all succinctly captured in one single property: v-model.

It’s all in the docs – this isn’t anything hidden or ground breaking, and is even something I had read, understood and implemented before when writing some forms-based components – but even with some of the really cool more-advanced stuff I’m doing, the basics sometimes need a prod to the front of memory too.

Blog

View all
PHP

How to easily access to Custom Fields in Joomla

Over the past few years, I’ve had to get more and more involved in developing Joomla websites. Joomla is such a powerful, flexible and user-friendly CMS to work...

Continue reading...

Movie

“Gravity” and Dolby Atmos

Gravity is one of those movies that I missed in theatres, but watched in 3D on Blu-ray when it first came out. I had just gotten a 3D TV and, hey, any disc with...

Continue reading...

Photo

Making photos fit on your website

As you know, I love my work as a web developer. I also love taking my landscape photographs. So it only seemed natural that when Mity wanted someone to write about...

Continue reading...

JS

vue-slide-up-down: helping improve accessibility

When starting out in Vue, coming from jQuery, one thing that I did miss was the jQuery slideUp and slideDown functions. They’re just so convenient, easy and effortless...

Continue reading...

I am the Development Director (and co-owner) at Mity Digital, a Melbourne-based digital agency specialising in responsive web design, custom web development and graphic design.
Mity Digital