vue双下拉框给接口默认值

现在下拉框和时间选择框都没有默认给getRequisitionApi接口值,而且当我选择一个后再选另一个,前面选择的值又不见了。
怎么让下拉框和时间选择框默认都给值。选择第一个后再选择另一个,前面选择的值还在


<div class="type-select">
      <el-select @change="changeType" v-model="typeValue" placeholder="钢筋" size="mini">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="changeYear">
      <el-date-picker
        v-model="year3"
        type="year"
        prefix-icon="el-icon-arrow-down"
        placeholder="选择年"
        @change="getData2"
        value-format="yyyy"
        :clearable="false"
      ></el-date-picker>
    </div>


data() {
    return {
      typeValue: "",
      year3: "2023",
      options: [],
    };
  },
  mounted() {
    this.getEquipmentAlarmApi();
    this.init();
    this.getRequisitionApi()
  },
methods: {
    getData2(year3){
        this.getRequisitionApi(year3)
    },
    changeType(id){
        console.log(id,88888888777777)
        this.getRequisitionApi(id)
    },
    getEquipmentAlarmApi() {
      getCategoryApi().then((res) => {
        if (res.code === 200) {
          this.options = res.result;
        }
      });
    },
    getRequisitionApi(typeValue= 1572464512223326209,year3){
        let data = {
            projectSn: this.$store.state.projectSn,
            categoryId: typeValue,
            year: year3
        };
        getRequisitionApi(data).then((res) => {
           if (res.code === 200) {
             this.option = res.result;
           }
        });
    },
}

【以下回答由 GPT 生成】

问题的解决方案如下所示:

  1. 实现getRequisitionApi函数

首先,我们需要实现getRequisitionApi函数,该函数需要通过API调用获取接口数据,并将其赋值给options数组。在获取数据之后,我们需要将适当的默认值赋给typeValueyear3

控制器中的实现代码如下所示:

methods: {
  async getRequisitionApi(year3) {
    try {
      // 发起API调用,获取接口数据
      const response = await axios.get('your-api-url');
      const data = response.data;

      // 将接口数据赋值给options数组
      this.options = data;

      // 如果year3已经被改变,则直接返回
      if (year3) {
        return;
      }

      // 设置默认值为第一个选项的id
      this.typeValue = this.options[0].id;

      // 设置默认年份
      this.year3 = "2023";

      // 根据默认选项获取数据
      this.getData2(this.year3);
    } catch (error) {
      console.error(error);
    }
  },
  // 其他方法...
}
  1. 实现changeType和其他相关方法

根据您提供的代码,changeType方法可能用于在选择不同的选项时触发事件。您可以根据具体需求在changeType方法中编写逻辑。如果您需要在选择不同的选项时保留之前选择的year3值,可以参考下面的示例代码:

methods: {
  changeType() {
    // 在这里编写根据选择的选项执行的逻辑
    // 不需要重新设置year3的值
    // 其他逻辑...
  },
  // 其他方法...
}
  1. 建立默认值的逻辑和条件

根据您的描述,您希望下拉框和日期选择框具有默认值,并且在选择第一个选项后仍保留之前选择的值。

在代码中,我们使用mounted生命周期钩子调用getRequisitionApi函数来获取接口数据并设置默认值。但是默认值只会在mounted阶段设置一次,而不会在选择选项后保留之前的值。

如果您希望选定选项后保留之前选择的值,可以修改changeType方法,将year3的值存储在一个变量中。然后在设置选定选项的默认值后,将之前存储的year3值重新赋给year3

例如,可以在changeType方法中添加以下代码:

methods: {
  changeType() {
    // 在这里编写根据选择的选项执行的逻辑
    const previousYear3 = this.year3;

    // 设置默认的选项值
    // 其他逻辑...

    // 将之前存储的year3值重新赋给year3
    this.year3 = previousYear3;
  },
  // 其他方法...
}

这样,当您选择一个选项后再选择另一个选项时,之前选择的year3值将保留下来。

请注意,以上提供的代码仅作为示例,并且需要根据您实际的业务逻辑进行相应的修改和调整。

希望以上的解决方案能够解决您的问题。如果您有任何其他问题,请随时提问。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

如果你的接口想要两个值,我的建议是加一个按钮,change只是给变量赋值,点击按钮之后再调用接口。

如果不想加按钮的话,可以在接口方法加一个判断,然后每次调用接口都给两个值,比如 this.getRequisitionApi(“”,year3) 或者 this.getRequisitionApi(typeValue,""),然后去判断是否有一个为空值,如果没有空值,那就执行接口的内容