watch 和 methods 执行顺序

最新推荐文章于 2024-11-06 22:41:26 发布

︶ㄣ洳影隨形しovё

最新推荐文章于 2024-11-06 22:41:26 发布

阅读量145

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_43907534/article/details/132469731

版权

问题：在平台选择改变的时候获取服务类目，但服务类目中接口入参一直为空

思路：感觉明明在watch已经给platform 赋值过却依然我没值
所以只有一种可能就是，methods中方法的执行顺序早于 watch

解决办法：就是在平台选择改变时，给接口入参赋值，添加了【代码1】这一行

知识点：
1）watch在页面初始化的时候不会执行
2）触发methods的执行顺序： methods -》 watch -》computed

参考链接：https://www.jianshu.com/p/f412bff6da82

<template>
  <Form ref="popupFormRef" :model="popupForm" :rules="popupFormRules" :label-width="120">
    <FormItem label="平台" prop="popSelectedPlatform">
      <Select v-model="popupForm.popSelectedPlatform" placeholder="请选择平台" :disabled="condition" @on-change="platformChange">
        <Option v-for="item in platformList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </FormItem>
  </Form>
</template>

<script>
export default {
  data(){
    return {
      popupForm: {
        popSelectedPlatform: "全部",
        platform: "",
      },
      platformList: [
        {
          label:"全部",
          value:"全部"
        },
        {
          label:"E服务小程序",
          value:"2"
        },
        {
          label:"E服务公众号",
          value:"3"
        },
      ],
    }
  },
  watch:{
    "popupForm.popSelectedPlatform" : function(newValue,oldValue){
      console.log("newValue:" + newValue,"oldValue:" + oldValue)
      this.popupForm.platform = newValue == "全部"? '' : newValue
      console.log("this.popupForm.platform:" + this.popupForm.platform)
    }
  },
  methods:{
    platformChange(val){
      console.log(val)
      if(val != "全部"){
        this.popupForm.platform = val  // 代码1
        this.getCategoryList()
      }
    },
    // 根据平台查询服务类目接口
    getCategoryList(){
      console.log(this.popupForm.platform,283)
      getCategory({ platform: this.popupForm.platform }).then(res => {
        console.log(res)
        if(res.ret == '00000'){
          this.serviceCategoryList = res.data
        }
      })
    },
  }
}
</script>

<style></style>