在POST请求中传递相同参数名称的不同v模型值的正确方法
在POST请求中传递相同参数名称的不同v模型值的正确方法
提问于 2018-08-09 17:04:34
小提琴
我将表单中的v模型值赋值给api中的参数。api中只有一个参数必须分配给两个输入，即：name。name是必需的字段。
使用每个输入的v-model值，如果选择第一个radiobtn，它将返回name值的null。如果选择了第二个收音机，则用户必须在文本框中输入文本。
我需要检查是否单击了第一个单选按钮，或者用户在文本框中输入了文本，并成功地将第一个收音机或文本框的值传递给相同的api参数(name)。
我该怎么做？
HTML：
<label class="radiogrp"><input type="radio" v-model="picked" name="default_user" value="reg" >Mary</label>
<label class="radiogrp"><input type="radio" v-model="picked" name="new_usr" value="non-reg"><input type="text" v-model="new_user" ></label>联署材料：
/* API parameters
name: (string) or (null)
*/
new Vue({
el: '#app',
data: {
picked: Boolean,
new_user: ""
},
/* Two v-model form values for the one property in the API. */
submit_name(){
this.$http.post("https://jsonplaceholder.typicode.com/users",{
name: this.picked || this.new_user})
// ....then() etc.
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-09 18:01:58
您可以添加@input事件，它可以在输入更改时更新new_usr字段。此外，您还可以查看picked变量，以确保如果在单选按钮之间切换，则应该重置new_usr。
function callMe(){
var vm = new Vue({
el : '#root',
data : {picked : '',new_usr:''},
methods: {
callApi(){
let dataApi={}
if(this.new_usr.length){
dataApi.name=this.new_usr;
}else{
dataApi.name=this.picked;
}
console.log('You selected=', dataApi.name)
}
},
watch:{
picked: function (val) {
this.new_usr='';
}
}
})
}
callMe();<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
<div>
<label class="radiogrp">
<input type="radio" v-model="picked" name="default_user" value="reg" >Mary</label>
<label class="radiogrp">
<input type="radio" v-model="picked" name="new_usr" value="non-reg">
<input type="text" @input="evt=>new_usr=evt.target.value" :value="new_usr" > </label>
<button @click="callApi">hit me</button>
<span>Picked: {{ new_usr }}</span>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51772492
复制相关文章
相似问题
腾讯云开发者
