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 =＆＃34; order_by＆＃34; + {{filed}}＆lt; - 这是来自循环+ {{key}}＆lt; - 这也来自循环。但我不能写这个工作。我不能认为这是一个动态的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>

Answer 2

如果通过编写关于每一行的模板来生成行。然后我认为这是您的解决方案。

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

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

然后在TradeTableItem（您要填充的模板，表格行）中，将id编写为：id =“ this.id”，其中this.id是道具的一部分。

希望这会有所帮助

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

2 个答案: