Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

data() and Vue Dev Tools

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

The template I pasted in is 100% hardcoded. Boring!

See this little "shipping" message down here? Let's pretend that sometimes we need this message to change - like maybe if the user is on the page for longer than 60 seconds, we want our app to get desperate and change the shipping time to be faster.

The point is: we want this message to be dynamic, which means that it needs to to be a data. Copy the message. Then, in data(), remove firstName: we're not using that anymore. Call the new data key legend and set it to the shipping message.

... lines 1 - 58
export default {
... line 60
data() {
return {
legend: 'Shipping takes 10-12 weeks, and products probably won\'t work',
};
},
};
... lines 67 - 82

Now that we have a data called legend, back up on the template, we're allowed to say {{ legend }}.

... lines 1 - 48
<span class="p-3">
{{ legend }}
</span>
... lines 52 - 82

Beautiful! And if we move over to our browser and refresh... it even works!

Vue Dev Tools

The first time we played with data, we set our entire Vue application onto a global variable so we could change the firstName data from our browser's console and watch the HTML update. Being able to see and play with the data on your components is a pretty handy way to debug. And fortunately, there's a much easier way to do this than manually setting a global variable.

It's called the "Vue.js Dev Tools": a browser extension for Chrome or Firefox that gives you tons of Vue information. If you don't already have it, install it - it's amazing.

Once you have the dev tools... and once you're on a page that contains a Vue app running in dev mode, you can open your browser's debugging tools - I actually need to close and re-open mine so that it sees my Vue app - and... boom! New Vue tab. Click it!

I love this. On the left, it shows the component "hierarchy" of my app. In a few minutes, we're going to create more components and start nesting them inside of each other, just like HTML. If you click on <Products>, ah: on the right, you can see the data for this component. And we can change its value! Add quotes and replace this with whatever message is in your heart. When you hit the save icon... the HTML updates! Vue calls this "reactivity": the idea that Vue watches your data for changes and re-renders a component when necessary.

Anyways, the Vue dev tools will be a powerful way to visualize our app, see its data and even change data to see how things update.

The data() Function versus data: () => { Function

Before we create our second component, I need to point out a small detail. We configure Vue by passing it options. Some of these options are set directly to values, while others - like data() - are functions.

And because the data() function is always just a return statement, you'll often see it written with the shortcut, arrow syntax: data: (), arrow, ({, remove the return and fix the ending.

... lines 1 - 60
data: () => ({
legend: 'Shipping takes 10-13 weeks, and products probably won\'t work',
}),
... lines 64 - 80

Just like with the render shortcut we used in products.js, this is effectively the same: it says that the data property is set to a function that returns this object. The return is implied.

You can use this if you want... but I'm going to go back to the original way. It's a bit longer, but I'll use this syntax consistently for all Vue options that are set to functions. The shorter syntax also has a limitation where you can't use the this variable: something that we will need later.

Next: let's extract part of our product listing markup into a second component and include it from Products. This will start to show off one of Vue's key concepts: having multiple components that communicate to each other.

Leave a comment!

7
Login or Register to join the conversation
davidmintz Avatar
davidmintz Avatar davidmintz | posted 10 months ago

Want devtools with Vue3? The instructions at https://devtools.vuejs.org/... for installing devtools v6.0.0-beta.21 don't make it easy. It says "To install or update the beta version of the devtools, go to one of repository releases and download the xpi file." followed by a link to https://github.com/vuejs/vu... where I could find no file with an xpi extension. After some struggle I managed to stumble into https://vueschool.io/lesson... and their link to a dated version which I finally figured out needs to be: https://github.com/vuejs/vu... Hope it helps someone.

Reply

Thank you, David!

If you want some guidelines on how to install Vue Dev Tools, head on to this link:

https://devtools.vuejs.org/guide/installation.html

Depending on your browser, the instructions may vary.

Reply
davidmintz Avatar

yeah those instructions didn't lead me to the solution, hence my comment. they do point to the repository but when you get there you can't find the file you need.

1 Reply

Ah, I see what you mean! In the "Beta" version of the devtools (firefox), you need to click on where it says "Assets", down after all the changelog info, with a down arrow to expand that. It will then show you several options, and one of them is the xpi file!

1 Reply
Romain Avatar

Hello, with VueJS 3 the Vue Dev Tools don't appear !

Reply
Michael Avatar

Version 6 Beta Release adds support for vue 3, https://github.com/vuejs/vu...
It does not support vue 1 and 2, so you have to install both versions if needed.

1 Reply

Hi rherault!

Good point!

Currently, Vue Dev Tools is not available for Vue 3 applications. This will change soon though, and while we can't be sure they will work and look exactly the same, you'll be able to debug most if not all of the things we show in this course!

I'm too hoping this is released ASAP! :)

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

This course is also built to work with Vue 3!

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.0
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.1.0
        "eslint-plugin-import": "^2.19.1", // 2.20.2
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.5
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.11
        "vue-loader": "^15.9.1", // 15.9.2
        "vue-template-compiler": "^2.6.11", // 2.6.11
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}