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