Vue如何在组件中使用id？

Question

如何在组件中使用id，代码如下：

组件代码如下：Profilelist.js

<template>
<div class="col col-m-12 col-t-6 col-d-6 box-item f-software">
                        <div class="item animated">
                            <div class="desc">
                                <div class="image">
                                    <a href="#popup-{{id}}" class="has- 
popup"><img src="{{workpic}}" alt="" /></a>
                                </div>
                                <div class="category">{{category}}</div>
                                <div class="name">
                                    <a href="#popup-{{id}}" class="has- 
popup">{{project_name}}</a>
                                </div>
                            </div>
                        </div>

   <div id="popup-{{id}}" class="popup-box mfp-fade mfp-hide">
                            <div class="content">
                                <div class="image">
                                    <img src="{{workpic}}" alt="">
                                </div>
                                <div class="desc">
                                    <div class="category">{{category}}</div>
                                    <h4>{{project_name}}</h4>
                                    <p>
                                        {{project_content}}。
                                    </p>
                                    <a href="{{project_link}}" 
 class="btn">View Project</a>
                                </div>
                            </div>
                        </div>
                    </div>
</template>

索引文件代码如下：

<div class="row box-items">

              <ProfileList 
              v-for="profile in loadedProfiles"
              :key="profile.id"
              v-bind:id="profile.id"
              :workpic="profile.workpic"
              :category="profile.category"
              :project_name="profile.project_name"
              :project_content="profile.project_content"
              v-bind:project_link="profile.project_link"
              />

            </div>

它会产生如下错误代码：

• href="#popup-{{id}}"：属性内的插值已被删除。请改用 v-bind 或冒号简写。例如，用 代替 。
• src="{{workpic}}"：属性内的插值已被删除。请改用 v-bind 或冒号简写。例如，用 代替 。
• href="#popup-{{id}}"：属性内的插值已被删除。请改用 v-bind 或冒号简写。例如，用 代替 。
• id="popup-{{id}}"：属性内的插值已被删除。请改用 v-bind 或冒号简写。例如，用 代替 。
• src="{{workpic}}"：属性内的插值已被删除。请改用 v-bind 或冒号简写。例如，用 代替 。
• href="{{project_link}}"：已删除属性内的插值。请改用 v-bind 或冒号简写。例如，用 代替 。

Answer 1

您必须将数据绑定到您的属性并使用模板文字进行适当的连接，按照示例替换您的属性

:href="`#popup-${id}`" 

:src="workpic"

:id="`popup-${id}`"

:href="project_link":