技術標籤：cssjavascriptvue.jshtmlhtml5

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>