Question

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

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

我需要检查是否单击了第一个单选按钮，或者用户是否在文本框中输入了文本，并将第一个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>

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

1 个答案: