Vue 2 和 Nuxt：v-for 中的变量 href（Vuex 状态变量）

Posted 2023-02-23

【中文标题】Vue 2 和 Nuxt：v-for 中的变量 href（Vuex 状态变量）

【英文标题】：Vue 2 and Nuxt: variable href inside a v-for (Vuex stateful variables)

【发布时间】：2017-09-23 02:05:19

【问题描述】：

我正在尝试使用字符串插值在组件 v-for 循环中创建一个 href：

<template>
  <div class="pa4">
    <div v-for="item in navigationItems">
      <a href="'#'$item">item</a>
    </div>
 </div>
</template>

<script>
  import mapState from 'vuex'
  export default 
    computed: 
      ...mapState(
      navigationItems: state => state.navigationItems
      )
    
  
</script>

导航项源自 Vuex 商店：

export const state = 
  navigationItems: ['Home', 'About', 'Blog', 'Contact']

Angular JS 有一个完美的 ng-href 指令： https://docs.angularjs.org/api/ng/directive/ngHref

当我使用 v-bind:href="item" 时出现“未绑定”错误。任何想法如何解决这个问题？

【参考方案1】：

假设您的 mapState 工作正常，它应该是

<a :href="'#'+item">item</a>

这是example。