From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Using a model to begin interactivity

Using a model to begin interactivity - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Using a model to begin interactivity

- [Instructor] In this video we're going to bind a form element to some viewed data and watch it stay updated automatically. In View, form elements, in an instance are expected to get their values from View. That is, your JavaScript data is the source of truth, not whatever is in the DOM, once set up correctly, View keeps the DOM up to date for you automatically with however your data changes, this is like controlled forms in React, if you've ever used those. We're going to add the selected size to our viewed data and get it updating on the page. So, right now, of course, the initial selection is whatever the first size is in the Select box. So, we're going to change it to something else. Switching over to my editor, I'm going to add selected size to the data, I'm just going to do this so we don't see the word size this small over and over again, so selected size and I'll make it size nine and I'll save that. Now, back over here in my template, I need to tell the Select box that it…

Contents