我有一个带有用于输入文本的字段的表单,当单击按钮时,我必须使用输入中的值发送请求
我该怎么做?
<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)
}
}
}
答案 0 :(得分:0)
您尚未使用存储输入的值,因此必须使用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)
}
}
}