How can I generate dynamic url in a list?-CodePudding

I get a list from my backend:

[
{
'name': 'nameA',
'codename': 'codenameA'
},
{
'name': 'nameB',
'codename': 'codenameB'
},
{
'name': 'nameC',
'codename': 'codenameC'
}

My goal is to display a list of owner.name with a url like http://myurl/owner/edit/${{ owner.codename }} using VueJS.

Currently my code is :

<template>
<div class="container my-3">
  <div class="row">
    <div class="col-8">
      <ul v-for="owner in this.databaseOwners" :key="owner.name" class="list-group">
        <li class="list-group-item">
          <a href=`"localhost:8080/admin/owner/${{{ owner.codename }}}"` target="_blank" rel="noreferrer noopener">{{ owner.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>

But it doesn't work, how can I use dynamic URL in my case? I'm really new to frontend so I'm sorry if my question seems really trivial.

CodePudding user response：

Try this:

Make a new method under methods property of your Vue component:

methods: {
    url(codename) {
        return `/admin/owner/${codename}`;
    }
}

And use it like this:

<a :href="url(owner.codename)">...</a>

Pay attention to the colon symbol:

:href

It means that it will try and bind the href attribute to some variable/method/computed property that is coming from the Vue component

CodePudding user response：

This works : <a :href="'/admin/owner/' owner.codename">{{ owner.name }}</a>

CodePudding user response：

this may work

<a :href="'localhost:8080/admin/owner/' {{ owner.codename }}" target="_blank" rel="noreferrer noopener">{{ owner.name }}</a>