Vue how to concat dynamic id with field from v-for loop + string?

Question

I have a v-for loop in my template like this :

<th v-for="(field, key) in lists[$route.params.model][$route.params.status].fields"
                        :key="key">
                        <div class="columnName">{{ field }}</div>
                        <div class="arrows">
                            <div class="arrow-up-icon" @click="getSearchResult(1, query, statusesIds,
                                lists[$route.params.model][$route.params.status].values[key], 'desc')"></div>
                            <div :id="here should me dynamic id" class="arrow-down-icon" @click="getSearchResult(1, query, statusesIds,
                                 lists[$route.params.model][$route.params.status].values[key], 'asc')"></div>
                        </div>
                    </th>

And now my problem is that i would like to have in my dynamic id ( for each button in my loop ) to be like this: :id="order_by"+{{filed}} <-- this is from loop + {{key}}<-- this is from loop too. But I cannot to write this to work. I can't concat this to be a dynamic id. Can I do this in my tempplate where is my :id?

Answer 1

If you are generating a row by writing a template about each row. Then, I think this is the solution for you.

  <TradeTableItem
    v-for="(debtReserve, index) in debtReserves"
    :key="debtReserve.id"
    :debtReserve="debtReserve"
    :market="market"
    :id="'reserve' + index"
  ></TradeTableItem>

In the upper step, we generated an id for each row.

And, in TradeTableItem (your template where we are populating, the table rows), Write id as :id="this.id" where this.id is a part of props.

Hope this helps

Answer 2

You don't need to use the template {{prop}}, just use plain JavaScript string concatenation.

    <th v-for="(field, key) in lists[$route.params.model][$route.params.status].fields"
         :id="'order_by' + field"
         :key="key"
    >
                      
    </th>

Using JavaScript Expressions