vue使用select间相互绑定

　　　　

让这两个select相互绑定，让roleOptions选取值后，worklist弹出得是roleOptions值

<el-select v-model="postForm.projectName" placeholder="请选择" @change="getList(postForm)">

<el-option

  v-for="item in roleOptions"

  :key="item.key"

  :label="item.label"

  :value="item.key">

</el-option>

<el-select v-model="postForm" placeholder="请选择" value-key="id" @change="getList2(postForm)">

<el-option

  v-for="item in worklist"

  :label="item.productName"

  :value="item">

</el-option>

首先在created里面获取值，设res为null，传入getlist中；

async created() {

this.lastWorklist = await api_price_list({},this.queryParam);

let res = null;

this.getList(res)

},

然后在methods中进行判断

methods: {

  async getList(res) {

　　this.listLoading = true

　　如果res为null获取worklist

　　 if(res != null){

   　 this.worklist = [];

　　　如果res里面的获取数据为s或y则绑定不同的值

    if(res.projectName == "s"){

      this.lastWorklist.data.list.forEach(item => {

      if(item.app == res.projectName){

      this.worklist.push(item);

      }

     });

    }

　else if(res.projectName == "y"){

　　this.lastWorklist.data.list.forEach(item => {

　　if(item.app == res.projectName){

　　this.worklist.push(item);

　　}

　　});

　　}

　}

this.listLoading = false

},

然后在getlist2里面在第二个select组件进行传值绑定

getList2(res){

  if(res.app=="s"){

     this.postForm.projectName = "抖音";

  }

  else if(res.app == "y"){

    this.postForm.projectName = "快手";

  }

},