时间戳

首页 > 解决方案 > 如何将所选项目传递给axios

javascript - 如何将所选项目传递给axios

问题描述

如何将下拉菜单中的选定项目传递给 axios 以获取数据。我需要将项目而不是 id 传递给 api。

<label>City</label> 
<select  @change="getArea()"  v-model="key"  >
  <option :value='0'>Select City</option>
    <option v-for='data in cityList' :value='data.id'>{{ data.city }} 
  </option>
</select>

<script>
var self =this;
axios.get('http://172.31.0.114:5008/api/city/'+this.key) //i want to pass selected item(text) to api.
  .then(function(res) {
    self.areaList = res.data;
  })
  .catch(function(error){
    console.log('Error:',error);
  });
</script>

标签： javascriptvue.js

解决方案

试试这个：

获取方法：

function getArea(e) {
  let selectedVal = this.value;

  axios
    .get("http://172.31.0.114:5008/api/city", {
      params: {
        city_id: 12345
      }
    })
    .then(function(res) {
      self.areaList = res.data;
    })
    .catch(function(error) {
      console.log("Error:", error);
    });
}

发布方法：

函数 getArea(e) { 让 selectedVal = this.value;

  axios
    .post("http://172.31.0.114:5008/api/city", 
      {
        city_id: 12345
      })
    .then(function(res) {
      self.areaList = res.data;
    })
    .catch(function(error) {
      console.log("Error:", error);
    });
}

推荐阅读