vue中watch监听多个值的变化触发某个事件_watch监听el-select变化-CSDN博客

本文链接：https://blog.csdn.net/weixin_47144417/article/details/112260047

vue中watch监听多个值的变化触发某个事件

监听value1与value2的值触发某个事件
在这里插入图片描述

<template>
  <div>
    {{ value1 }} =======value1
    <el-select v-model="value1" placeholder="请选择">
      <el-option
        v-for="item in options1"
        :key="item.value1"
        :label="item.label1"
        :value="item.value1"
      >
      </el-option>
    </el-select>
    {{ value2 }}========value2
    <el-select v-model="value2" placeholder="请选择">
      <el-option
        v-for="item in options2"
        :key="item.value2"
        :label="item.label2"
        :value="item.value2"
      >
      </el-option>
    </el-select>
  </div>
</template>

           
<script>
export default {
  data() {
    return {
      options1: [
        {
          value1: "选项1",
          label1: "黄金糕",
        },
        {
          value1: "选项2",
          label1: "双皮奶",
        },
        {
          value1: "选项3",
          label1: "蚵仔煎",
        },
        {
          value1: "选项4",
          label1: "龙须面",
        },
        {
          value1: "选项5",
          label1: "北京烤鸭",
        },
      ],
      value1: "",
      value2: "",
      options2: [
        {
          value2: "选项1",
          label2: "黄金糕",
        },
        {
          value2: "选项2",
          label2: "双皮奶",
        },
        {
          value2: "选项3",
          label2: "蚵仔煎",
        },
        {
          value2: "选项4",
          label2: "龙须面",
        },
        {
          value2: "选项5",
          label2: "北京烤鸭",
        },
      ],
    };
  },
  computed: {
    allLatlngs() {
      const { value1, value2 } = this;
      return {
        value1,
        value2,
      };
    },
  },
  watch: {
    //定义的变量名
    allLatlngs(e) {
      console.log(e); // 选中的值 {value1: "选项1", value2: "选项2"}
      console.log(222222);
    },
  },
};
</script>

<style scoped>
</style>