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

知道如何在组件中使用ID？

1 个答案: