vue -- watch、组件

描述1：vue列表编辑使用弹框子组件，点击编辑获取不到正确的详情信息

---

解决：用watch监听id，watch监听的值变化了调用详情。

以下是部分代码：

父组件：

列表获取该条数据的id：

<el-table-column label="图片/视频" width="170" align="center"> <template slot-scope="scope">
<div v-if="scope.row.adType === 3" style="cursor: pointer;width: 150px" @click="showUpload(scope.$index, scope.row)"> {{scope.row.adPartList.length>0?scope.row.adPartList[0].partUrl:''}} </div>  </template> 
</el-table-column>

父组件使用自组件，父组件给自组件传id：

 <el-dialog :title="title" :visible.sync="editVisible" width="60%">
 
     <ad-add v-on:dialogCancel="dialogCancel" :getId = getId>
 
 </el-dialog>

父组件给自组件传id方法：

methods: { 
    AdAdd(){ 
    this.getId = -1;

        this.editVisible =true; 
        this.title ="新增广告"; 
    }, 
    handleEdit(index, row) {//获取详情 
        this.getId = row.id; 
        this.editVisible =true; 
        this.title ="编辑广告"; 
    }, 
}

子组件：

子组件接收参数，并用watch监听

 props:{ 
     getId:Number  //设置为Number类型， 
 }, 
 watch: { 
     getId:{ 
         handler:function(newVal,oldval){ 
                 if(newVal!=oldval){ 
                     this.$nextTick(()=>{ 
                             this.getAdvertiseDetail();//获取详情的数据 
                     }) 
                 } 
         }, 
         immediate:true,//关键 
         deep:true 
     }, 
},

好了，完美的完成了详情的获取！不过，好像遇到了有些输入框无法编辑的问题，那该怎么破？别急，往下看。

---

描述2:新增时可以新增输入框，但是编辑时点击添加，在添加方法里能打印数组已经添加了，但是页面不更新，并且无法编辑

---

解决：其实很简单，因为watch是异步调用的。所以我们在data里面定义的是没有作用的，在watch里面为未定义，我们只要在watch里调用的获取详情的返回里重新定义下就好。好了，直接上代码。

image

原代码：

 this.$axios.get(this.$Api.getAdvertiseDetail,obj).then(response => { 
     if (response.data.code ===200) { 
         this.ruleForm = {
             adName:response.data.content.adName, 
             adType:response.data.content.adType, 
         } 
       switch(response.data.content.adType){ 
         case 1: 
           return this.imgBox = response.data.content.adPartList; 
           break; 
         case 2: 
           return this.vidioBox = response.data.content.adPartList; 
           break; 
         case 3:
            return this.ruleForm.h5UrlArr = response.data.content.adPartList; 
            break; 
         default: 
           return ''; 
      } 
    }
});

修改后：

 this.$axios.get(this.$Api.getAdvertiseDetail,obj).then(response => {
 
 if (response.data.code ===200) {
 
 this.ruleForm = {

             adName:response.data.content.adName,
 
             adType:response.data.content.adType,
 
 }
 
 switch(response.data.content.adType){
 
         case 1:
         return this.imgBox = response.data.content.adPartList;
         break;
          case 2: 
         return this.vidioBox = response.data.content.adPartList; 
         break; 
        case 3:
 
         this.ruleForm = {     
                    adName:response.data.content.adName, 
                    adType:response.data.content.adType,
                    h5UrlArr:response.data.content.adPartList  //这个是关键！！！！给数组赋值 
             }
 
             // return this.ruleForm.h5UrlArr = response.data.content.adPartList;
              break; 
             default:
              return ''; 
         }
 
 } 
 });

终于完美的解决了，其实在查找问题的时候，还特意的去官网还有网上找了很多关于watch的资料，总结出一句话是，不熟悉watch要慎用！其实也没那么可怕，遇到问题，解决问题，才是一个码农的进阶之路。

最后，希望对你有帮助，谢谢！