Vue checkbox not updating with data change

Question

Having problems with my data in Vue updating the UI, but only checkboxes seem to have this problem.

I'm trying to allow only one checkbox to be checked at one time, therefore I'm setting all the checkboxes to false upon clicking one of them. However, this works in the data but isn't rendered correctly in the checkboxes.

HTML:

<table class="buildings-modify--table table-full table-spacing">
    <thead>
       <tr>
          <th>Name</th>
          <th>Primary</th>
          <th>Address</th>
          <th>City/Town</th>
          <th>Province</th>
          <th>Postal Code</th>
          <th>Phone</th>
          <th>Active</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="landlord in selectedLandlords" :key="landlord.id">
         <td>{{ landlord.name }}</td>
         <td>                            
           <input type="checkbox" :value="landlord.is_primary" @change.prevent="makePrimaryLandlord(landlord)">
         </td>
         <td>{{ landlord.address }}</td>
         <td>{{ landlord.city }}</td>
         <td>{{ landlord.province}}</td>
         <td>{{ landlord.postal_code}}</td>
         <td>{{ landlord.phone }}</td>
         <td>{{ landlord.is_active ? "Yes" : "No" }}</td>
       </tr>
   </tbody>

Vue Code:

export default {
    data: function() {
        return {
            selectedLandlords: []
        }
    },
    methods: {
        makePrimaryLandlord: function(landlord) {
            this.selectedLandlords = this.selectedLandlords.map(item => {
                item.is_primary = false; return item});
            }
        }
    }
}

Only the checkbox appears to have an issue. If I change say the name, or a text value with a filtered array setting them all to a specific value they change but the checkboxes data change doesn't reflect in the UI, however the data in Vue is correct.

tony19 · Accepted Answer · 2022-07-15 21:45:43Z

6

From Official docs

text and textarea elements use value property and input event;
checkboxes and radiobuttons use checked property and change event;
select fields use value as a prop and change as an event.

edited Jul 15, 2022 at 21:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 27, 2020 at 19:28

Anatoly

23.2k3 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

AshJIT Over a year ago

Have also tried using checked. Didn't change anything.

AshJIT Over a year ago

selectedLandlords is an array of objects which is being looped by Vue; each of these is a landlord

Anatoly Over a year ago

Is is_primary prop exists in each item of an array before checking/unchecking?

Anatoly Over a year ago

It seems that this.selectedLandlords = this.selectedLandlords.filter(item => { item.is_primary = false; return item}) does not filter items at all, just turns is_primary in each item. Is it intentional?

AshJIT Over a year ago

Sorry, typo. That was supposed to be map. And yes, is_primary exists on the object before checking/unchecking.

|

Davison Joseph · Accepted Answer · 2021-11-12 03:46:15Z

3

Use :input-value instead of :value

answered Nov 12, 2021 at 3:46

Davison Joseph

716 bronze badges

Comments

André Boonzaaijer · Accepted Answer · 2021-01-14 14:45:00Z

0

I can't exactly make it up from your code, but are you sure the property is_primary is available in the objects on load of the viewmodel? So for example this.selectedLandlords.push({ Name:'John', is_primary: false, ...}) should contain the is_primary field to make it reactive.

If not, you should use Vue.set(item, 'is_primary', false) to make it reactive.

answered Jan 14, 2021 at 14:45

André Boonzaaijer

8466 silver badges15 bronze badges

Comments

anniex · Accepted Answer · 2021-07-30 02:50:15Z

0

try using the key attributes to re-render the checkbox.

reference: https://michaelnthiessen.com/force-re-render/

answered Jul 30, 2021 at 2:50

anniex

3564 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vue checkbox not updating with data change

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related