如何发送Fetch Vuejs2形式的POST请求

Question

我有一个带有用于输入文本的字段的表单，当单击按钮时，我必须使用输入中的值发送请求

我该怎么做？

<div class=" select__body" v-if="addedForm === 3">
  <div class="select-item" v-on:click="PostReqests()">Value 1</div>
  <div class="select-item" v-on:click="closeForm()">Value 2</div>
  <div class="select-item" v-on:click="closeForm()">Value 3</div>
  <div class="select-item" v-on:click="closeForm()">Value 4</div>
  <div class="select-item" v-on:click="closeForm()">Value 5</div>
  <div class="select-item-nh">
    <div class="added-form">
      <input type="text" name="name" class="form-control select-item-add">
      <button class="form-control" v-on:click="closeForm()">Add to</button>
    </div>
  </div>
</div>

export default {
  name: 'Index',
  data() {
    return {
      post: [],
      data: [],
    }
  },
  methods: {
    async PostReqests() {
      const request = await fetch("https://localhost:8000/addobject", {
        method: "POST",
      })
      console.log(request)
    }
  }
}

Answer 1

您尚未使用存储输入的值，因此必须使用v-model。有关更多信息，请阅读Form Input Bindings。 您可以尝试以下代码

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
</select>
<input v-model="name" placeholder="edit me">

export default {
  name: 'Index',
  data() {
    return {
      post: [],
      data: [],
      name:'',
      selected:''
    }
  },
  methods: {
    async PostReqests() {
      const request = await fetch("https://localhost:8000/addobject", {
        method: "POST",
        name: this.name, // sending the name input
        selected: this.selected // sending the option which was selected from dropdown
      })
      console.log(request)
    }
  }
}