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

【问题标题】：Vue 2 and Nuxt: variable href inside a v-for (Vuex stateful variables)Vue 2 和 Nuxt：v-for 中的变量 href（Vuex 状态变量）
【发布时间】：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" 时出现“未绑定”错误。任何想法如何解决这个问题？

【问题讨论】：

标签： vuejs2 vue-component vuex nuxt.js

【解决方案1】：

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

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

这是example。

【讨论】：