How to concatenate URL with input text in Vue-CodePudding

I need a little help with concatenation in Vue. I have an input field where I enter some username and I want to concatenate it with the URL in my data. Here is my code

<input type="text" name="text" placeholder="Username" id='username' v-model="usersrc">
<div v-for="item in storedData" :key="item.id">
                <a :href="item.link" target="_blank">
                    <p>{{item.name}}</p>
                    <p  :id="item.id   'availability'"></p>
                </a>
            </div>

export default {
components: {
    AppLayout,
 },  
     data() {
    return {
        usersrc: this.usersrc,
        items: [
            {id:1, name: "Facebook" ,link:"https://facebook.com/${{usersrc}}"}, and so on

My purpose is to get the whole URL with the username in the tag in div element. When I click on it, for example if I enter test, to get the https://facebook.com/test URL. Also I have tried like this

link:"https://facebook.com/ 'usersrc'"
link:"https://facebook.com/{{usersrc}}"

But nothing works. I am new in Vue, so I would be grateful for any help!

CodePudding user response：

try with

link:"'https://facebook.com/' usersrc"

or better with alt 96

link:"`https://facebook.com/` usersrc"

CodePudding user response：

data() function execute only once when component render. so we need to update that data manually when something is change. and also use single curly braces in backtick.

watch:{
 usersrc(newVal){
   this.items =  this.items.map(item=> {
        return {...item,link:`https://facebook.com/${usersrc}`})
   }
 }
}