vue监听多个输入框都有值触发事件

在Vue.js中，你可以使用`v-model`指令来绑定多个输入框，并通过自定义事件来监听它们是否都有值的变化。首先，你需要在每个输入框上设置相同的`v-model`属性，以便数据双向绑定：

<input type="text" v-model="input1">
<input type="text" v-model="input2">
<input type="text" v-model="input3">

<!-- 使用计算属性或watcher 来检查所有输入框是否有值 -->
<template>
  <div @click="allInputsHaveValue">点击查看是否所有输入都有值</div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: ''
    };
  },
  methods: {
    allInputsHaveValue() {
      const haveValue = this.input1.trim() && this.input2.trim() && this.input3.trim();
      if (haveValue) {
        console.log('所有输入框都有值');
      } else {
        console.log('有空输入框');
      }
    }
  },
  watch: {
    // 或者使用watch监听变化
    '$root.$data': {
      handler(newValues) {
        const haveValue = Object.values(newValues).every(value => value.trim());
        this.allInputsHaveValue();
      },
      deep: true
    }
  }
};
</script>

在这个例子中，当你点击“点击查看是否所有输入都有值”按钮时，它会检查`input1`, `input2`, 和 `input3` 是否都包含非空字符。如果所有输入框都有值，它会输出相应的消息。