Vue how to use id in components?

Question

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 .

Answer 1

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