Vue页面渲染数据之后获取后台需要的接口参数

最新推荐文章于 2024-08-08 16:22:29 发布

原创最新推荐文章于 2024-08-08 16:22:29 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

Vue从零开始专栏收录该内容

8 篇文章

订阅专栏

博客内容描述了在Vue中遇到的问题，即页面数据由后台动态渲染后，多选框的选择在点击搜索时无法正确获取。解决方案是在created钩子中进行相关操作，确保在点击搜索时能正确传递参数。

在这里插入图片描述
页面上两个多选框是通过后台返回的数据渲染上去的
与选择时间对应的是时间的范围
与事件类型对应的是事件的类型
在点击搜索框的时候
需要将对应的参数传递过去并进行数据搜索

	  console.log(this.searchTime);
      console.log(this.eventTypeMsg);
      this.axios({
        url: "/api/test/",
        method: "POST",
        data: {
          serch_time: this.searchTime,
          event_type: this.eventTypeMsg
        }
      }).then(res => {
        //console.log(res.data.data);
        this.sampleInformation = res.data.data;
      });

此时发现打印的两个值皆为空而我在获取到他们的时候又赋了值

changeTime(event) {
      //console.log(this.dateTime[event.target.value].search_time)
      this.searchTime = this.dateTime[event.target.value].search_time;
    },
    changeEvent(event) {
      //console.log(this.eventType[event.target.value])
      this.eventTypeMsg = this.eventType[event.target.value].event_type;
    },

解决措施如下
在created函数里我进行了如下操作

    if ($(".choseTime").html() == "今天") {
      this.searchTime = "today";
    }
    if ($(".choseContent").html() == "拒绝件") {
      this.eventTypeMsg = "拒绝件";
    }

再点击搜索的时候
perfect！