Vue 如何将动态 id 与来自 v-for 循环 + 字符串的字段连接？

Question

我的模板中有一个 v-for 循环，如下所示：

<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>

现在我的问题是我希望我的动态 id（循环中的每个按钮）是这样的：:id="order_by"+{{filed}} <--这是来自循环 + {{key}}<-- 这也是来自循环。但是我不能写这个来工作。我不能将其连接为动态 ID。我可以在我的模板中执行此操作吗？我的 :id 在哪里？

Answer 1

您不需要使用模板 {{prop}}，只需使用普通 JavaScript 字符串连接即可。

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

Using JavaScript Expressions

Answer 2

如果您通过编写关于每一行的模板来生成一行。那么，我认为这就是适合您的解决方案。

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

在上一步中，我们为每个row生成了一个id。

并且，在 TradeTableItem（我们正在填充的模板，table 行）中，将 id 写为 :id="this.id"，其中 this.id 是 props 的一部分。

希望对您有所帮助

Vue 如何将动态 id 与来自 v-for 循环 + 字符串的字段连接？

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

concatenation

dynamic

vue.js

vuejs2