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

Question

FIDDLE

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

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

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