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?

tony19 · Accepted Answer · 2022-07-15 19:47:50Z

43

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

edited Jul 15, 2022 at 19:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 5, 2017 at 8:27

Nikolai Borisik

1,51113 silver badges22 bronze badges

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

Comments

Kick Buttowski · Accepted Answer · 2022-03-20 04:36:10Z

4

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

edited Mar 20, 2022 at 4:36

Kick Buttowski

6,74713 gold badges39 silver badges61 bronze badges

answered Aug 5, 2019 at 12:42

Rahul Manas

951 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related