VueWeb Development

Setting the default value of a select tag in Vue.js

By March 23, 2016 2 Comments

I recently came a cross a small stumbling block when rendering a select box from data passed to my component via props.

This is my component:

And I’m including it in a parent Vue instance like so:

The Problem

I want to be able to set the selected tag from my parent instance. This works fine using the code above – the problem occurs when the current tag_id is not set in my store object.

When the tag_id is not set in my store object, I want my component to default to the “Choose…” option.

Digging Deeper

When the tag_id is not defined in my store object, it’s being set as null on my component. I thought this was what I wanted, but this does not select the “Choose..” option by default since the Html value of the option is an empty string. What I actually want is the tag to explicitly be an empty string when it isn’t set.

The Solution

While I could probably perform a quick check when including my component and do something like the following:

It doesn’t solve the problem if this component is going to be included in many places. It also makes my component somewhat brittle since it relies on being instantiated in a particular way.

Instead, I resorted to setting a default value for my “tag” prop. This default value is used when the :tag prop isn’t passed, or is null – just what I wanted!

The code to set a default value to the prop is lifted from the vue.js documentation:

Simples!

Michael Stivala

Michael Stivala

An inspired creative professional.