vue在项目中遇到的小坑

最新推荐文章于 2024-06-18 10:28:00 发布

许hao

最新推荐文章于 2024-06-18 10:28:00 发布

阅读量280

点赞数

分类专栏： Vue 文章标签： vue javascript js

本文链接：https://blog.csdn.net/ok2547881370/article/details/107435843

版权

Vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

最近在项目中, 监听某个属性的改变,然后去更该另外的一个属性
使用watch时, 用了箭头函数, 导致this的指向发生了改变, 应该使用常规匿名函数即可. this就可以指向当前实例的本身了

 watch: {
    value:{
      handler: (val, olVal) => {
       console.log(this)
      }
    }
  },
 //更改为
   watch: {
    value:{
      handler: function(val, olVal){
       console.log(this)
      }
    }
  },

在修改一个同事的bug时,Checkbox默认选中有问题, 解决时,费了点时间, 以为是个很简单的事情
同事的代码示例

 <el-checkbox-group v-model="allQueryPurviewListModel">
     <el-checkbox
         v-for="item in queryCodeList"
         :label="item.codeExplain1"
         :key="item.codeVal"
    ></el-checkbox>
</el-checkbox-group>


export {
 data(){
  return {
  	queryCodeList: [
      {
      codeVal: 1,
      codeExplain1: "xigua"
      },
      {
      codeVal: 2,
      codeExplain1: "putao"
      },
      {
      codeVal: 3,
      codeExplain1: "boluomi"
      },
    ],
    allQueryPurviewListModel : []
  }
 },
 mounted(){
	this.allQueryPurviewListModel = [1 ,2];
}
}

以上我以为默认值就这样解决了,但还是不行

最后更改为,label和key的值保持一致即可,这样动态的设置默认值就可以了

 <el-checkbox-group v-model="allQueryPurviewListModel">
     <el-checkbox
         v-for="item in queryCodeList"
         :label="item.codeVal"
         :key="item.codeVal"
    >{{item.codeExplain1}}</el-checkbox>
</el-checkbox-group>


export {
 data(){
  return {
  	queryCodeList: [
      {
      codeVal: 1,
      codeExplain1: "xigua"
      },
      {
      codeVal: 2,
      codeExplain1: "putao"
      },
      {
      codeVal: 3,
      codeExplain1: "boluomi"
      },
    ],
    allQueryPurviewListModel : []
  }
 },
 mounted(){
	this.allQueryPurviewListModel = [1 ,2];
}
}