Vue Tips — CSS Frameworks and Watching Nested Data

John Au-Yeung
May 13 · 5 min read
Photo by Joshua Reddekopp on Unsplash

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at using CSS frameworks to save us time from styling everything manually and watching nested data.

Use an Off the Shelf CSS Framework

Off the shelf CSS framework saves us time from styling things that we’ve to style manually otherwise. There’re many frameworks to choose from, including Tailwind CSS, Foundation, Bulma, and Bootstrap.

They come with classes and JavaScript code to style static components like inputs and tables and also create dynamic components like modals and popups.

Some of them have their own Vue components built for it. For instance, Buefy is a library that’s based on Bulma. BootstrapVue is a component library that’s based on Bootstrap.

If there’s a Vue component library made for it then, then we should use it since they integrate much better with other Vue components in our app. They take props and emits events like any other Vue components.

For instance, we can use Buefy to take advantage of the Bulma framework without making our own styled-components based on Bulma as follows:

index.js :

new Vue({
el: "#app",
data: {
name: ""
}
});

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css" />
</head>
<body>
<div id="app">
<b-field label="Name" type="is-danger" message="Name">
<b-input type="name" v-model="name" maxlength="30"> </b-input>
</b-field>
<p>{{name}}</p>
</div>
<script src="index.js"></script>
</body>
</html>

In the code above, we have the b-field component from Buefy, which is an input form field component. Then we have our b-input component, which is the actual input component.

The label is rendered by the b-field component so that we can see the label. In addition, there’s styling with the type prop and the message prop provides a message that’s displayed.

The input has input validation and binds to a variable of our choice with v-model .

We did all that by just using the library and referencing the provided component, so it’s the best choice for quickly using styled-components.

Photo by Marty Southwell on Unsplash

Watching Nested Data in Vue

We can watch data with by adding a function to the watch object in our component options.

It’s useful for watching for updates in nested objects and arrays. In these cases, Vue has no idea what’s changed unless we explicitly add watcher and set it to watch for the structural changes of the object. This is because Vue sees that the reference to the object hasn’t changed.

For instance, we can use watchers to watch for changes to an array as follows:

index.js :

new Vue({
el: "#app",
data: {
nums: [1, 2, 3]
},
methods: {
append() {
this.nums.push(Math.max(...this.nums) + 1);
}
},
watch: {
nums: {
deep: true,
handler() {
console.log("nums changed");
}
}
}
});

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="append">Append</button>
<p v-for="n in nums">{{n}}</p>
</div>
<script src="index.js"></script>
</body>
</html>

In the code above, we have an append method to push numbers into the nums array as it’s called. Then we have the watch object with the nums object inside to watch for changes in nums . We set deep to true so that it watches for all structural changes. The handler is then run when it’s changed.

Then when we click the Append button, the handler function will run.

There’s also an immediate option so that the watcher is run when the field is initialized. For instance, we can use it as follows:

new Vue({
el: "#app",
data: {
nums: [1, 2, 3]
},
methods: {
append() {
this.nums.push(Math.max(...this.nums) + 1);
}
},
watch: {
nums: {
deep: true,
immediate: true,
handler() {
console.log("nums changed");
}
}
}
});

Then we’ll see nums changed logged when we first load the app.

If we want to use the same handler function to watch more than one item, we can set it to the function in the methods object.

For instance, we can write:

index.js :

new Vue({
el: "#app",
data: {
nums: [1, 2, 3],
nums2: [4, 5, 6]
},
methods: {
append() {
this.nums.push(Math.max(...this.nums) + 1);
},
appendTo2() {
this.nums2.push(Math.max(...this.nums2) + 1);
},
watch() {
console.log("nums changed");
}
},
watch: {
nums: {
deep: true,
immediate: true,
handler: "watch"
},
nums2: {
deep: true,
immediate: true,
handler: "watch"
}
}
});

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="append">Append</button>
<button @click="appendTo2">Append 2</button>
<p v-for="n in nums">{{n}}</p>
<p v-for="n in nums2">{{n}}</p>
</div>
<script src="index.js"></script>
</body>
</html>

In the code above, we have 2 buttons, which append numbers to 2 separate arrays as we click it by running append or appendTo2 functions respectively.

Then since we set handler to 'watch' , the watch method in methods is called, so we’ll see that “nums changed” is logged if we click any of the buttons.

Conclusions

Off the shelf CSS frameworks are great for reducing styling effort needed for us. Some frameworks have component libraries made from it so that we don’t have to spend time styling them ourselves.

We should use watchers for watching values changes deeply nested objects and array. It has options to start watching if the component loads and also has options to watch deeply nested objects, which computed properties can’t do.

Did you know that we have four publications? Show some love by giving them a follow: JavaScript in Plain English, AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning! We’ve also launched a YouTube and would love for you to support us by subscribing to our Plain English channel

And as always, Plain English wants to help promote good content. If you have an article that you would like to submit to any of our publications, send an email to submissions@plainenglish.io with your Medium username and what you are interested in writing about and we will get back to you!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store