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
JS

Integrating Tiny with Vue in a real world application

TinyMCE 5 has made the setup process more straightforward - and even easier with the Cloud version. And as there are so many JS frameworks out there, Tiny have...

Continue reading...

PHP

Extending the ItemHelper for Joomla

There are times in Joomla where you want a bit of control over your content at the template override level – such as showing the first X characters of a string. PHP...

Continue reading...

JS

How Tiny helps me deliver the best content authoring experience

At Joomla Day Australia 2019 in Brisbane, I spoke about how TinyMCE helps deliver the best content authoring experience. And for those who couldn’t make it on...

Continue reading...

Photo

How to show real-time highlights and shadows clipping in Photoshop

I’ve used Photoshop for years. Decades even. Yikes, showing age there. But for my photography, I tended to use Photoshop for specific things – such as cleaning...

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