v-if not working inside v-for

Question

I am looping though some data using a v-for and displaying it in a table. I want to conditionally display some text based on one of the values in the array

my html looks like

 <div id="vue-wrapper"> <div class="table table-borderless" id="table"> <table class="table table-borderless" id="table"> <thead> <tr> <th>Name</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tr :key=item v-for="item in items"> <td>@{{ item.module }}</td> <td>@{{ item.enabled }}</td> <div v-if="item.enabled == true"> <td>Disable Button </td> </div> <div v-else> <td>Enable Button </td> </div> </tr> </table> </div> </div>

and my vue js looks like

const app = new Vue({ el: '#vue-wrapper', data: { items: [{"module":"Blog","enabled":false},{"module":"Booking","enabled":true},{"module":"Review","enabled":true}], hasError: true, hasDeleted: true, newItem: {'name': ''} }, created () { // this.getVueItems() }, methods: { getVueItems: function () { axios.get('/api/module/').then(response => { console.log(response.data) this.items = response.data; console.log(this.items); }); }, createItem: function () { }, deleteItem: function () { }, } });

But when I load the page, both the disabled button and enabled button text is displayed. and there is the following error

"TypeError: Cannot read property 'enabled' of undefined"

but i can read the enabled property in the for loop, so I am not sure what i need to change

Daniel · Accepted Answer · 2018-07-20 16:25:54Z

I think this is an issue with the use of your td/tr/div tags

 <tr :key=item v-for="item in items"> <td>@{{ item.module }}</td> <td>@{{ item.enabled }}</td> <div v-if="item.enabled == true"> <td>Disable Button </td> </div> <div v-else> <td>Enable Button </td> </div> </tr>

The div actually falls outside of the the tr, and is not necessary anyway, as you can put logic into the td Try using this instead:

 <tr :key=item v-for="item in items"> <td>@{{ item.module }}</td> <td>@{{ item.enabled }}</td> <td v-if="item.enabled == true">Disable Button</td> <td v-else>Enable Button</td> </tr>

Daniel Beck · Accepted Answer · 2018-07-20 16:30:35Z

<div> elements can't be a direct child of a <tr>, so those are getting bumped outside the v-if loop.

In this case you could put the v-if directly on the td, but in cases where that isn't an option, you can use <template> tags instead of a real HTML node:

const app = new Vue({ el: '#vue-wrapper', data: { items: [{ "module": "Blog", "enabled": false }, { "module": "Booking", "enabled": true }, { "module": "Review", "enabled": true }], hasError: true, hasDeleted: true, newItem: { 'name': '' } }, created() { // this.getVueItems() }, methods: { getVueItems: function() { axios.get('/api/module/').then(response => { console.log(response.data) this.items = response.data; console.log(this.items); }); }, createItem: function() {}, deleteItem: function() {}, } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="vue-wrapper"> <div class="table table-borderless" id="table"> <table class="table table-borderless" id="table"> <thead> <tr> <th>Name</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tr v-for="item in items"> <td>@{{ item.module }}</td> <td>@{{ item.enabled }}</td> <template v-if="item.enabled == true"> <td>Disable Button </td> </template> <template v-else> <td>Enable Button </td> </template> </tr> </table> </div> </div>

Collectives™ on Stack Overflow

v-if not working inside v-for

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related