CODEWITHSUNDEEP
vuejs2vue-componentvuexnuxt.js
bf514
bf514

Reputation: 15

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

I'm trying to use string interpolation to create an href inside a component v-for loop: 

<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>

Navigation items originate in the Vuex store: 

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

Angular JS has an ng-href directive that would be perfect: https://docs.angularjs.org/api/ng/directive/ngHref

When I use v-bind:href="item" I get 'not bound' errors. Any ideas how to pull this off?

Upvotes: 1

Views: 1733

Answers (1)

Bert
Bert

Reputation: 82469

Assuming your mapState is working it should be 

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

Here is an example.

Upvotes: 1

Related Questions