在 POST 请求中为相同参数名称传递不同 v-model 值的正确方法

Question

我正在将表单中的 v-model 值分配给 api 中的参数。 api 中只有一个参数我必须分配给两个输入，即：name。 name 是必填字段。

使用每个输入的 v-model 值，如果选择第一个 radiobtn，它将 return null 用于 name 的值。如果选择了第二个单选按钮，则用户必须在文本框中输入文本。

我需要检查第一个单选按钮是否被点击或用户在文本框中输入文本并成功将第一个单选按钮或文本框的值传递给相同的 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>

JS:

/* 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.

}
});

Answer 1

您可以添加 @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>

在 POST 请求中为相同参数名称传递不同 v-model 值的正确方法

Correct way to pass different v-model values for same parameter name in POST request

api

rest

submit

radio-group

vuejs2