Vuejs - How to change the text inside {{ }}

Question

I've been building a data table recently and stuck at somewhere. I want my columns to be clickable to be able to display the rows in ascending and descending orders. When they are being displayed in ascending orders I want to show my arrow_upward icon and otherwise I want to show arrow_downward icon. Here is what I have done so far...

data () {
    return {
      arrow_upward: 'arrow_upward',
      arrow_downward: 'arrow_downward',
    }
   }

and by the way, here is my usage of my Material Icons...

<span class="table-icons">arrow_upward</span>

I tried this one first;

<span class="table-icons" v-if="col == sortColumn">{{arrow_upward}}</span>

Basically I say, if it's sorted by column, show the arrow_upward icon. And here is my problem. How am I going to change inside the {{ }} everytime the column is clicked. It should work like a toggle and the interpolation tags should change between arrow_upward and arrow_downward. How do I do that?

Answer 1

You could use the following conditional rendering :

 <span class="table-icons" >{{col == sortColumn?'arrow_upward':'arrow_downward'}}</span>

and no need to define them as data properties.