vue 监听两个输入框是否有值 当两个都有值才掉接口

你可以使用computed属性来监听这两个输入框的值，例如：

<template>
  <div>
    <input v-model="input1" />
    <input v-model="input2" />
    <button v-if="bothInputsFilled" @click="callApi">调用接口</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  },
  computed: {
    bothInputsFilled() {
      return this.input1 && this.input2
    }
  },
  methods: {
    callApi() {
      // 调用接口的代码
    }
  }
}
</script>

当两个输入框都有值时，就会显示“调用接口”按钮，点击该按钮可以调用接口。

相关问题

vue监听两个输入框有内容请求接口

在Vue.js中，如果你想监听两个输入框是否都有内容并在此时触发一个请求接口，你可以创建一个自定义事件处理器或者使用`v-model`和`v-on`指令。这里是一个简单的示例：

首先，假设你有两个输入框，分别绑定了`inputA`和`inputB`的数据属性：

<template>
  <div>
    <input v-model="inputA" placeholder="输入A">
    <input v-model="inputB" placeholder="输入B">

    <!-- 当两者都有内容时，触发methods里的fetchData方法 -->
    <button @click="fetchDataIfNotEmpty">点击获取数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputA: '',
      inputB: ''
    };
  },
  methods: {
    fetchDataIfNotEmpty() {
      if (this.inputA && this.inputB) { // 检查两个输入框是否有内容
        // 发送请求
        this.fetchData();
      }
    },
    fetchData() {
      // 这里填写你的实际网络请求
      console.log('正在发送请求...');
    }
  }
};
</script>

在这个例子中，当你在两个输入框中都输入了内容，点击按钮时，`fetchDataIfNotEmpty`方法会被调用，并检查`inputA`和`inputB`是否都不为空。如果满足条件，则会执行`fetchData`方法。

vue监听多个输入框

Vue.js可以很容易地监听多个输入框的值变化，通常通过绑定`v-model`指令和事件处理器来实现。当你在HTML模板中创建多个`<input>`元素，并将它们的数据属性与Vue实例的响应式数据绑定，例如：

<input v-model="username" type="text">
<input v-model="email" type="email">

在这里，`v-model`会双向绑定到`username`和`email`这两个Vue实例的属性上。然后，在Vue组件的script部分，你可以添加一个计算属性或者方法来处理这些值的变化：

export default {
  data() {
    return {
      username: '',
      email: ''
    };
  },
  watch: {
    // 监听用户名和邮箱值的变化
    $data: function(newData, oldData) {
      console.log('用户名或邮箱已改变:', newData);
      // 这里可以进一步处理数据，比如验证、发送请求等
    }
  }
};

在这个例子中，每当`username`或`email`的值发生变化，`$data`的观察者会被触发。