Vue如何从v-for循环+字符串中使用字段来连接动态id？

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>