如何在VUE中与输入文本连接URL

Question

我需要在Vue中加入一些帮助。我有一个输入字段，其中输入一些用户名，并且想将其与数据中的URL相连。这是我的代码

<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

，我的目的是在DIV元素中使用标签中的用户名获取整个URL。当我单击它时，例如，如果输入测试，请获取https://facebook.com/test URL。 我也尝试过这样的尝试

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

，但无济于事。我是Vue的新手，所以我会感谢任何帮助！

Answer 1

您可以使用 nofollow noreferrer“ a>。

此外，我只是添加了一张检查，如果输入框中没有值，则不应显示链接。您可以根据自己的要求删除此支票。

演示：

new Vue({
  el: '#app',
  data: {
    usersrc: null,
    items: [
        { id: 1, name: 'Facebook', link: 'https://facebook.com/' },
      { id: 2, name: 'Instagram', link: 'https://instagram.com/' }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" name="text" placeholder="Username" id='username' v-model="usersrc">
  <div v-if="usersrc">
    <div v-for="item in items" :key="item.id">
      <a :href="`${item.link}${usersrc}`" target="_blank">
        <p>{{item.name}}</p>
        <p :id="item.id + 'availability'"></p>
      </a>
    </div>
  </div>
</div>

Answer 2

尝试

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

或更好地使用Alt+96

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

Answer 3

data（）函数在组件渲染时仅执行一次。因此，我们需要在发生变化时手动更新该数据。并在Backtict中使用单个卷发括号。

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

Answer 4

这应该起作用，也许问题在其他地方？我是Juse注意到您在数据中写的：

usersrc: this.usersrc

我建议使用像空数组一样使用默认值，因为您可以通过脚本中的“此”访问数据中的内容，因此这将是多余的。

如果您用
userrc：''？