Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to check Vue applications in a production environment. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Trigger the Prop value and update

In addition to figuring out how to check Vue internal variables, we also try to update component property values.

Suppose we have a component whose prop controls the text of an element, so how do we force that value to trigger a UI update?

{{msg}} export default {props: {msg: {type: String, default:''}

Find the Vue component instance

First, we need to use the Chrome devtools elements panel to find the top-level element of the component. In this case, the element is H2:

Use the $0 command

Once we have selected the element, we can enter $0judicial 0 in the console to indicate the last selected element. $1 is the previously selected element, and so on. It remembers the last five elements $0-$4.

To view the details of the Vue instance, you can use $0. 0.

Use the document.querySelector method

We can also use any DOM lookup method (such as querySelector or getElementById, etc.) to select elements. Here we will use document.querySelector to view the Vue instance:

Document.querySelector ('[data-v-763db97b]'). _ _ vue__

Here we use the data attribute to find elements, but you can use any valid CSS selector in querySelector.

Lock prop valu

With a reference to the Vue component instance, we can expand it in the console to see what's inside:

Take a closer look, see msg prop in the middle, click three points, and you will see the current value.

We can view the propvalue in the console using the following command:

/ / Using $0 $0.__vue__.msg / / Using querySelector document.querySelector ('[data-v-763db97b]'). _ _ vue__.msg

Update prop value

Now, to update the propvalue is to reassign the variable to it. Therefore, you can do this on the console:

$0.__vue__.msg = 'Hello from the updated valueworthy' This is the end of this article on "how to check Vue applications in a production environment". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.