⚠️ This lesson is retired and might contain outdated information.

Bind Values to Input Fields in Vue.js

Greg Thoman
InstructorGreg Thoman
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 3 months ago

Use v-model to create 2-way data binding. You can render dynamic options in a select element and bind them to their data. Use v-bind on inputs to use dynamic properties on the Vue instance. Adding modifiers like .lazy, .number and .trim allow us to trim our methods and let Vue take care of things like trimming white space.

[00:00] We're starting with an empty view component. Let's add an attribute called checked. In our component, let's add a check box and add v model checked. For the label, let's just create a ternary. If checked, display the string checked, else, unchecked.

[00:17] For radio boxes, let's add a dino array and an attribute for chosen dino to our data block. In the component, let's create a template and list out dinos. Each one will have an input of type radio. Let's bind the value to dino and set v model equal to chosen dino. Then let's add a span to show our chosen dino.

[00:43] For multi-select, let's add a select periods attribute and a periods array. We'll open a select element and set v model equal to selected periods. Then, let's iterate through the periods setting v bind value to period.value and we'll display the name. Let's create another span to show the selected periods.

[01:10] Now let's set the attribute single to an empty string and create a simple input field and set v model to the attribute single. After, let's render single in a paragraph tag.

[01:24] What about a multi-line input? Let's add an attribute for message, then a text area with v model set to message. We'll add a placeholder for fun. To render the message as multi-line, let's create a paragraph with its style attributes set to white space pre and render the message inside of it.

~ 9 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today