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

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

	  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!

你可能感兴趣的:(Vue从零开始)