Vfrdtyky

how to use id in components, the code as below:

The components code as below: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>

The index file code as below:

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

And it outcome an error code as below:

• href="#popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .


• src="{{workpic}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .


• href="#popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .


• id="popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .


• src="{{workpic}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .


• href="{{project_link}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

You have to bind the data to your attributes and do the proper concatenation using template literals, replace your attributes following the examples

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



:src="workpic"



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



:href="project_link":