Javascript 如何将所选项目传递给axios

如何将下拉菜单中的选定项传递给axios以获取数据。我需要将项not 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>

试试这个：

获取方法：

张贴方法：

函数getAreae{ 让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);
    });
}

---

你能显示整个组件吗？bro什么是city_id？city_id是get请求中的查询参数名称。如果你直接想向endpoint like发出请求。在将url传递给axios之前，请尝试将其包含在url中。我需要像Banglore一样传递city名称，而不是它的id。在你的选项中。{data.city}.您正在将data.id作为值。为此，请将其更改为data.city。

  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);
    });
}