vue.js - 如何使用 v-for 索引作为 href 的值

Question

我正在使用 VueJS 和基础 css。我正在尝试从 v-for 循环创建手风琴。但是 VueJS 希望我将 href 绑定到 projectIndex 变量。

我尝试创建一个 projectIndex 参数，然后使用计算属性返回“#”+ projectIndex 的串联，但 projectIndex 始终未定义。

data: {
        projectIndex: ''
}

……

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

出于兴趣，我正在使用[[]]而不是{{}}因为我也在使用与 VueJS 共享相同{{}}的 twig

 <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变量是否已经设置？

如果是，那么我认为它被你的第二个v-for使用相同prices的变量所取代，这样 for 循环就会中断

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

好的，我找到了解决方案。我发现我可以绑定到一个方法并将 projectIndex 作为一个值传入。像这样

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

然后我的方法返回我需要的连接。

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