href의 값으로 v-for 색인을 사용하는 방법

Question

재단 CSS와 함께 VueJS를 사용하고 있습니다. v-for 루프에서 아코디언을 만들려고합니다. 그러나 VueJS는 href를 projectIndex 변수에 바인딩하려고합니다.

나는 projectIndex 매개 변수를 만든 다음 "#"+ projectIndex의 연결을 반환하는 계산 된 속성을 사용하여 시도했지만 projectIndex 항상 정의되지 않습니다.

data: { 
     projectIndex: '' 
} 

.... 관심 부족

computed:{ 
       projectHref: function() { 
        return "#" + this.projectIndex; 
       } 
      } 

나는 또한 같은 {{}} VueJS

<ul class="accordion" data-accordion> 
        <li class="accordion-navigation" v-for="(priceData, projectIndex) in prices"> 
         <a href="#[[projectIndex]]">Price Project: [[priceData.meta.project.name]]</a> 
         <div id="[[projectHref]]"> 
          <div v-for="(prices, supplier) in priceData.prices"> 
           <h6>[[supplier|SupplierKeyName]] ([[supplier|SupplierKeyCode]])</h6> 
           <table class="table"> 
            <tr> 
             <td v-for="(price, priceBreak) in prices">[[priceBreak]]</td> 
            </tr> 
            <tr> 
             <td v-for="(price, priceBreak) in prices">[[price.currency]][[price.price]]</td> 
            </tr> 
           </table> 
          </div> 

         </div> 
        </li> 
       </ul> 

Answer 1

이 그대로 공유 나뭇 가지를 사용하고 있기 때문에이 [[]]를 사용하기보다는 {{}}하고 prices 변수가 이미 설정 되었습니까?

그래, 나는 그것을 루프에 대한 멀리

//here is the first 'prices' variable 
<li class="accordion-navigation" v-for="(priceData, projectIndex) in prices"> 
    <a href="#[[projectIndex]]">Price Project: [[priceData.meta.project.name]]</a> 
     <div id="[[projectHref]]"> 
      //here the prices variable is replaced 
      <div v-for="(prices, supplier) in priceData.prices"> 

시도를 중단하도록

Answer 2

확인하는 바르 차별화, 같은 prices 변수를 사용하여 두 번째 v-for로 대체 생각, 내가 찾은 경우 해결책. 메서드에 바인딩하고 projectIndex를 값으로 전달할 수 있다는 것을 알았습니다. like

<li class="accordion-navigation" v-for="(priceData, projectIndex) in prices"> 
        <a :href="projectHref(projectIndex)">Price Project: [[priceData.meta.project.name]]</a> 

내 메서드는 필요한 concatonation을 반환합니다.

methods: { 
projectHref: function (index) { 
        return "#" + index.toString(); 
       } 
}