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

Question

我正在尝试使用字符串插值在组件 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" 时，出现 'not bound' 错误。有什么想法可以解决这个问题吗？

Answer 1

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

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

这是一个example。

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

Vue 2 and Nuxt: variable href inside a v-for (Vuex stateful variables)

vuejs2

vue-component

vuex

nuxt.js