How to do dynamic conditional rendering in loop vuejs ( v-if in v-for )

Question

I have a table component in a .vue file that and i'm trying to show some icons based on the dir of the order clicked

example:

<th v-for="(column, index) in columns" :key="index" @click="sort( index )">
                <span>{{ column.label }}
                    <i v-if="column.dir == 'desc'" class="fa fa-sort-down"></i>
                    <i v-else class="fa fa-sort-up"></i>
                </span>

The above is what the layout of the header is and my default column object looks like this:

data().....
  columns: [ 
            {
                label: '#',
                order: false,
                search: false,
                column: 'id',
                dir: 'desc'
            },
            {
                label: 'Username',
                order: true,
                search: true,
                column: 'username',
                dir: 'desc'
            }]

Now in my sort method, i update the clicked column

var col = this.columns[column];
col.dir = ( col.dir == 'desc' ) ? 'asc' : 'desc';


// I tried to no avail
this.$set(this.columns, index, col);

Vue.set(this.columns, index, col);

Also
this.$nextTick(function() {
  columns[index].dir = ( columns[index].dir == 'desc' ) ? 'asc' : 'desc';

});

if i check my Vue dev tool, i can see the value updated but the reactivity never gets back to the main columns object and the view isnt update to show the else portion.

Probably not grasping the concept firmly, any help will be greatly appreciated. Thanks

UPDATE.....

Thanks so much for the help, so i happens that font-awesome was removing the from the DOM and replacing it with an SVG making it impossible for vue js to find it.

I will still choose an answer below nonetheless.

@MueyiwaMosesIkomi i think this post will help - stackoverflow.com/questions/40453427/… — DJC
– DJC, Commented May 21, 2019 at 14:19
The problem is you're using index as key. Instead, use a unique identifier. Say column? — tao
– tao, Commented May 21, 2019 at 14:22
tried an approach like that @DJC , didnt work... i think it works for boolean but not for string. Thanks though — Mueyiwa Moses Ikomi
– Mueyiwa Moses Ikomi, Commented May 21, 2019 at 14:22

tony19 · Accepted Answer · 2022-07-15 04:48:01Z

2

I copied most of your code and it works fine for me... https://jsfiddle.net/aj2nf6cw/

Could it be because you wrote var col = this.columns[column]; instead of var col = this.columns[index];?

Using var is fine because it will automatically refer to this.columns[index] because it's an object.

PS: I don't think you're using Vue.set properly. See: https://v2.vuejs.org/v2/api/#Vue-set. If you were to use it it would be Vue.set(this.columns[index], 'dir', 'asc');, but you don't have to use it because the your data is already reactive.

edited Jul 15, 2022 at 4:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 21, 2019 at 14:38

Edward Cahyadi

5701 gold badge6 silver badges12 bronze badges

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

Comments

Jalil · Accepted Answer · 2019-05-21 14:28:30Z

1

What you are doing doesn't work because you are creating a var inside the sort method that doesn't have the Vue observable like the this.columns. I leave you a working code example here

But basically you need to change this part in the sort method.

sort(index){
   this.columns[index].dir = (this.columns[index].dir == 'desc') ? 'asc' : 'desc'; 
}

answered May 21, 2019 at 14:28

Jalil

1,2761 gold badge15 silver badges36 bronze badges

7 Comments

Jalil Over a year ago

I put that button there just for testing purposes.

Mueyiwa Moses Ikomi Over a year ago

I had tried something of the sort. The value of that index changes alright as with my other attempts... the ui doesnt if. if its asc it should show the v-else but it doesnt. Reactivity doesnt stull happen @Jalil. Can you add the click to the th itself. Thanks

Jalil Over a year ago

Tell me if it worked or not, if it worked, please mark the answer as good to let other people see it too. if not, tell me c;

Mueyiwa Moses Ikomi Over a year ago

@sure will... I noticed something strange tho... if it do {{ column.dir }}, the value changes. but it doesnt work with the v-if. Weird

Mueyiwa Moses Ikomi Over a year ago

In my font-awesome removes the <i></i> from the dom and replaces it with an svg... so vue js can't find it

|

Collectives™ on Stack Overflow

How to do dynamic conditional rendering in loop vuejs ( v-if in v-for )

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest