Vue 2 및 Nux: v-for 내부의 변수 href(Vuex 상태 저장 변수)

Vue 2 및 Nux: v-for 내부의 변수 href(Vuex 상태 저장 변수)

문자열 보간을 사용하여 구성 요소 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-vmx:href="item"을 사용하면 '바인드되지 않음' 오류가 발생합니다.어떻게 하면 잘 해낼 수 있을까요?

다음과 같이 가정합니다.mapState작동하고 있습니다. 그래야 합니다.

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

여기 예가 있습니다.

언급URL : https://stackoverflow.com/questions/43621159/vue-2-and-nuxt-variable-href-inside-a-v-for-vuex-stateful-variables