Search code examples
vuejs2radio-button

Problem with listing of radio inputs based on array


In my Laravel 2.6 application I need to show listing of radio inputs based on an array:

customerAccountTypeValueArray::[ { "key": "I", "label": "Individual" }, { "key": "B", "label": "Business" } ]

I do it as:

<div class="custom-control custom-radio m-3"  v-for="nextCustomerAccountTypeValue, index in customerAccountTypeValueArray"
     :key="nextCustomerAccountTypeValue.key">
    <input
        :id="'customer_account_type_' + nextCustomerAccountTypeValue.key"
        type="radio"
        name="radio_account_type"
        class="custom-control-input"
        v-model="customerRow.account_type"
        :value="customerRow.account_type"
    >
    <label class="custom-control-label" :for="'customer_account_type_' + nextCustomerAccountTypeValue.key">{{ nextCustomerAccountTypeValue.label}}</label>
    ...

where customerRow is defined as:

    customerRow: {
        account_type: '',
        ...

As the result, I see my radio inputs, but selecting any of radio inputs, the customerRow.account_type value is not changed.

How can I fix it?


Solution

  • Replace

    :value="customerRow.account_type"
    

    with

    :value="nextCustomerAccountTypeValue.key"
    

    and it should work.