Following on from this, let’s list some of vUE’s potholes, some of which are self-inflicted and some of which are caused by components

  1. In vue, there is a watch function that listens for changes in data. Usually, it listens directly to a variable or data. For example, define a count in data, and when you click the button, the count will increase by one each time. You can use that data as the name of the function and use it as a function, just like the count function below, where the value printed is the last changed value. You can also take two arguments, newVal and oldVal, and print them to see what happens to the new and old data.
// vue
<template>
  <div>
    <span>{{count}}</span>
    <button @click="addNum">+</button>
  </div>
</template>

<script>
export default {
   data () {
     return {
       count:0
     }
   },
   watch: {
     count (val) {
       console.log(val);
     }
   },
   methods: {
     addNum () {
       this.count++
     }
   }
}
</script>

<style>

</style>
Copy the code

But what if you want to listen for changing data in an object? Well, you can.

// vue
<template>
  <div>
    <span>{{numObj.count}}</span>
    <button @click="addNum">+</button>
  </div>
</template>

<script>
export default {
   data () {
     return {
       numObj: {count:0}}},watch: {
     'numObj.count' (val) {
       console.log(val); }},methods: {
     addNum () {
       this.numObj.count++
     }
   }
}
</script>

<style>

</style>
Copy the code

As you can see here, just wrap it around a string, it’s the same thing, it doesn’t say what happens if it’s an array or if it’s a value in an array of an object, it’s just a value in an object.

  1. In some scenarios, for example, different roles or options will result in different display effects on the page. The most common example is TAB switching, selecting different types in the drop-down box, changing the table, text, and input options below. You can use includes to simplify the use. If you have a requirement that there are multiple pages but each login role is different, and you need to display different pages for different roles, here is a simplified example, you can do this:
// vue <template> <div> <el-select clearable style="width: 100%" placeholder=" placeholder ">< el-option label=" login page "value="0"></el-option> <el-option label=" Shopping page" Value ="1"></el-option> <el-option label=" shopping list page "value="2"></el-option> <el-option label=" administrator page" value="3"></el-option> <span option label=" account management page "value="4"></el-option> <el-option Label =" Financial data page" value="5"></el-option> </el-select> <span <span style =" box-sizing: border-box; color: RGB (0, 0, 0); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important; < span> </div> </template> <script> export default {data () {return {return} jurisdiction:0, } } } </script> <style> </style>Copy the code

The default login page is now the login page. When you log in as a different role, the jurisdiction in the data will change. When the value of the drop-down box changes, the corresponding page will be selected according to the changed value. When you select the account management page, your jurisdiction page will change to 4, and only the accounts can see the content. When you select the account management page, your jurisdiction page will change to 5, and only the accounts can see the content. Includes will compare the values on the right with the numbers in the array on the left. If they are the same, return true, otherwise return Fasle. This feature can be used to optimize and simplify code in certain scenarios.

  1. Do a lot of project interaction, and according to the steps, the general operation will let the user do two confirmation, that is, the popover, the code put here
// vue
this.$confirm("Do I give up?"."Tip", {
      confirmButtonText: "Sure".cancelButtonText: "Cancel".type: "warning",
    })
      .then(() = > {
        this.$router.go(-1);
      })
      .catch(() = > {
        console.log('Cancel give up');
    });
Copy the code

Then is the operation after determination, and catch is the operation after cancellation.

In the middle of the article, the power went out and I had no choice. It was too hot in Guangzhou and too many people turned on the air conditioner. Now is July 23 23:40, I write the article is writing while thinking, also did not play a draft, but roughly summed up some experience, convenient follow-up review. I don’t like to write long articles, of course I can do that, and write a good draft and polish that kind of, but I usually go home from work to brush B station, or take a bath and sleep. And I prefer a little bit a day, and then accumulate the progress of joy, if a breath is finished, it is not the same as the time of the wise, the follow-up is lonely, ha ha ha.

Okay, I hope that helped you. Above.