Dave Follett Sep 7 Originally published at davefollett.io on Sep 07, 2018
Key Vue Concepts
The following Vue concepts are discussed in this article:
- Style binding with
v-modeldirective to create two-way data bindings on form input
- Computed Properties
- Watched Properties
- 1 vote for CSS Variables
- 1 vote for Vue's Features
- 5 votes for Do Both
Oh and I also got 1 write in vote for:
Use React with styled-components :P ~ MinimumViablePerson
OK, it’s settled. Let’s do both.
- The HTML section goes inside the root
- The function went into the
<style>section was moved into my Vue version
computedsection was removed because it was not needed
Like the other articles, this gets us most of the way to a working solution but not quite. We have some more work to do. First, I added three fields to the Vue Instance data object:
Next, in the HTML section I used the
v-model directive to bind each
<input> element’s value to the corresponding Vue Instance data fields. When the
<input> element changes, Vue will take care of updating the data fields for us. The
v-model directive also will use the correct method for updating the
<input> element based on the input type. So that means we don’t have to bind to any events, Vue takes care of it for us. For more information on the the
v-model directive, I recommend the official Vue Docs here. You also may notice that I removed the
data-sizing attributes from the
<input> elements. They won’t be needed in the final solution.
We are nearly finished - now we just need methods that can update the CSS Variables and then use them to initialize and update them on change. Let’s first look at the code and then I will walk through what each part does.
I created 4 methods for updating the CSS variables but 3 of them,
updateCSSBase(), just use the
updateCSSVariable(name, value) method with specific arguments. The important take away here is that with Vue you can access the root DOM element that the Vue instance is managing with
this.$el and then set its style properties like this:
To initialize the CSS variables I invoked the
updateCSSBase() methods from the
mounted lifecycle hook.
And to update the CSS variables on change, I set Vue watchers on the data fields to call the appropriate method. Vue’s watchers are another really great feature. In addition to just knowing when something changes, you also get access to the new and previous values of what changed. For this example, I only care about the latest value. For more information on Vue’s watchers, I recommend the official Vue Docs here.
Putting It All Together - CSS Variables
I feel like the best way to wrap up this solution is to walk through it in sequence:
- The CSS variables are initialized when Vue is
- When the user changes an
v-modeldirective detects the
<input>element change and stores the value into the corresponding Vue data field.
- Changing the Vue data field will trigger the Vue watcher which will then call the appropriate method to update the CSS variable.
Vue Style Bindings And Computed Properties
This solution starts out similar to the CSS variables solution in that I:
- Used my base starter file
- Created the three fields to the Vue Instance data object:
- Used the
v-modeldirective to bind the
<input>element to those data fields.
But instead of creating methods, watchers, and using the
mounted lifecycle hook, I created the computed properties:
imgStyle which use the three data fields
base to return the proper CSS to be used. For more information on Vue’s computed properties, I recommend the official Vue Docs here.
Then I bound computed properties to the appropriate HTML elements (
<span>) using Vue’s style binding (
Putting It All Together - Again