This chapter continues to record some difficult knowledge points and solutions to problems in recent projects.

  • A created or Mounted hook will not be triggered in the process of switching between vue multiple routes. This can be handled by changing watch $route. But it’s more troublesome, and you have to watch it. It turns out that you can simply add a unique key to the router-view to ensure that the hook is rerendered during route switching. As follows:
<router-view :key="key"></router-view>
computed: {
  key() {// or :key="$route.path"Just make sure the key is uniquereturn this.$route.name ! == undefined? this.$route.name + +new Date(): this.$route + +new Date()
  }
 }
Copy the code
  • There was a scene where I mixed v-for and V-if, and then I was told not to write it together. I started off by writing it like this, as shown below

    Write relatively low, but the function can be normal implementation. And then they switched to computed methods

<ul class="jcButtonUl">
  <li v-for="(item,index) in hostLoginManageButton" :key="index" @click="hostAddManage(index)">
    <span :class="item.icon"></span>
    {{item.btnValue}}
  </li>
</ul>
Copy the code
computed:{
    hostLoginManageButton() {let buttonArray=[];
      this.hostManageButtonArray.forEach(function(item,index){
        if(index! ==2 && index! ==3 && index! ==5){ buttonArray.push(item); }});returnbuttonArray; }}Copy the code

To solve.

  • In actual development, we used Element’s table component, which contains the Checkbox. Every time a row checkbox is checked and another button is clicked to display a dialog, the checkbox status of the previously checked row will disappear. However, the data indicating the ticked data is not cleared. I failed to find an appropriate solution to this problem. Later, I monitored the selection-change event of the table and modified it accordingly. Problems can be solved, but they don’t feel perfect. Hopefully some god will provide a solution.

<el-table ref="jcqtTable" v-loading="loading" :data="tableData" tooltip-effect="dark" stripe style="width: 100%" @select="handleSelect" @selection-change="handleSelect" @select-all="handleSelect">
            <el-table-column type="selection" width="55"> < / el - table - column > omit < / el - table >Copy the code
computed: {
  	tableData() {
    	return this.jcqtTableCon.slice((this.currentPage-1)*this.pageSize, this.currentPage*this.pageSize)
    }
  }
Copy the code
  • The general way to listen for data in a component is
watch:{
    textInput:function(val){// operation}}Copy the code

What if you’re listening for a change in the value of an object? To look down

data() {return {
        obj:{
            textInput:' '
        }
    }
},
watch:{
    'obj.textInput':function(val){// operation}}Copy the code

The project has not been completed and is being updated successively.