Radiobutton值在v-for循环VUE.JS中始终为ON

时间:2016-07-25 11:45:04

标签: javascript vue.js

我有一个表单,用户可以在其中添加无限制的地址。现在每个地址字段集都包含一个单选按钮,以说明哪个地址是主要的。

问题是,即使没有选择它,也会返回' ON';

这是我的代码:

<div class="" v-for="address in addresses">
                        <div class="hr-line-dashed"></div>
                        <div class="form-group @if($errors->has('address.*.billing_company_name')) has-error @endif">
                            <label class="col-sm-2 control-label">Bedrijfsnaam</label>
                            <div class="col-sm-10">
                            <input type="text" v-model="address.billing_company_name" class="form-control" /></div>
                        </div>
                        <div class="form-group @if($errors->has('address.*.billing_to')) has-error @endif">
                            <label class="col-sm-2 control-label">T,A.V</label>
                            <div class="col-sm-10"><input type="text" v-model="address.billing_to" class="form-control" /></div>
                        </div>
                        <div class="form-group @if($errors->has('address.*.billing_address')) has-error @endif">
                            <label class="col-sm-2 control-label">Adres</label>
                            <div class="col-sm-10">
                            <input type="text" v-model="address.billing_address" class="form-control" /></div>
                        </div>
                        <div class="form-group @if($errors->has('address.*.billing_address')) has-error @endif">
                            <label class="col-sm-2 control-label">Postcode</label>
                            <div class="col-sm-10">
                            <input type="text" v-model="address.billing_postcode" class="form-control" /></div>
                        </div>
                        <div class="form-group @if($errors->has('address.*.billing_city')) has-error @endif">
                            <label class="col-sm-2 control-label">Plaats</label>
                            <div class="col-sm-10">
                            <input type="text" v-model="address.billing_city" class="form-control" /></div>
                        </div>
                        <div class="form-group @if($errors->has('address.*.billing_country')) has-error @endif">
                            <label class="col-sm-2 control-label">Land</label>
                            <div class="col-sm-10">
                            <select v-model="address.billing_country" class="form-control">
                            @foreach($countries as $code => $country)
                            <option value="{{$code}}">{{$country}}</option>
                            @endforeach
                            </select></div>
                        </div>
                        <div class="form-group @if($errors->has('primary')) has-error @endif">
                            <label class="col-sm-2 control-label">Primair adres?</label>
                            <div class="col-sm-10"><label class="control-label">
                            <input type="radio" name="t" v-model="address.primary" /></label> 
                            </div>
                        </div>
                        <div class="col-xs-12 text-right">
                            <a class="btn btn-danger btn-xs" v-on:click="removeAddress($index)"><i class="fa fa-trash-o"></i> Adres verwijderen</a>
                        </div>
                        <div class="clearfix"></div>
                    </div>

在我的vue实例中,我有以下内容:

var V = new Vue({
    el:"#form",
    data: addresses: [
        {
            billing_company_name: '',
            billing_to: '',
            billing_address: '',
            billing_postcode: '',
            billing_city: '',
            billing_country: '',
            primary: ''
        }]
}

我已经为该字段指定了一个名称值,因为如果不选择1个无线电将使它们全部被选中。

我尝试添加track-by=$index,但这也无效。

我提交表格时的结果,选中了1个单选按钮:

  "addresses" => array:2 [▼
    0 => array:7 [▼
      "billing_company_name" => "http://www.google.nl"
      "billing_to" => "http://www.google.nl"
      "billing_address" => "http://www.google.nl"
      "billing_postcode" => "http://www.google.nl"
      "billing_city" => "http://www.google.nl"
      "billing_country" => "AD"
      "primary" => "on"
    ]
    1 => array:7 [▼
      "billing_company_name" => "http://www.google.nl"
      "billing_to" => "http://www.google.nl"
      "billing_address" => "http://www.google.nl"
      "billing_postcode" => "http://www.google.nl"
      "billing_city" => "http://www.google.nl"
      "billing_country" => "DZ"
      "primary" => "on"
    ]
  ]

有人能指出我正确的方向吗?

0 个答案:

没有答案