Vue中如何拼接输入框文本与URL生成动态跳转链接

写法错误点 #

• {{}}是Vue模板专属插值语法，仅可用于组件模板的DOM文本位置，不能写在data内的JS字符串中，也不能作为绑定属性内的静态占位符使用
• ES6模板字符串必须用反引号（）包裹，不能使用单/双引号，变量占位符格式为${变量名}`，不需要额外嵌套大括号
• 初始化data时提前拼接link地址无效：usersrc是随用户输入实时变化的响应式值，data初始化阶段没有用户输入内容，提前拼接的静态字符串不会跟随输入自动更新
• 两处基础写法问题：usersrc初始值写this.usersrc会报取值错误，初始值设为空字符串即可；模板中v-for遍历的是storedData，data里定义的数组名是items，名称不匹配会导致列表渲染失败
• 之前尝试的两种错误写法本质都是把动态变量当静态字符串写死，不会读取实时的usersrc值：

  // 错误：单引号包裹是普通字符串，+'usersrc'会被当成普通文本拼接，不是读取变量
  link:"https://facebook.com/+'usersrc'"
  // 错误：{{}}不能在JS字符串里用，不会被解析成变量
  link:"https://facebook.com/{{usersrc}}"
  

正确实现代码 #

JS逻辑部分 #

只需要在站点配置里存固定的基础域名，不要提前拼接动态用户名：

export default {
  components: {
    AppLayout,
  },  
  data() {
    return {
      usersrc: '', // 绑定输入框的响应式变量，初始值为空
      storedData: [ // 和模板遍历的数组名保持一致
        {id:1, name: "Facebook" , baseLink: "https://facebook.com/"},
        // 其他站点按相同格式配置基础链接即可
      ]
    }
  }
}

模板部分 #

在绑定href属性时，实时拼接基础链接和用户输入的用户名即可，输入框v-model绑定保持不变：

<input type="text" name="text" placeholder="Username" id='username' v-model="usersrc">
<div v-for="item in storedData" :key="item.id">
  <!-- 动态拼接基础地址和用户输入值，每次输入变化时href会自动更新 -->
  <a :href="item.baseLink + usersrc.trim()" target="_blank">
    <p>{{item.name}}</p>
    <p :id="item.id + 'availability'"></p>
  </a>
</div>

补充：加.trim()是自动过滤用户输入内容首尾的空格，避免拼接出无效地址。如果用户输入为空时不想允许跳转，可以再加判断给href加禁用逻辑，或者在点击时判断提示。

内容的提问来源于stack exchange，提问作者Lindsay