Question

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

我尝试创建projectIndex参数，然后使用computed属性返回“＃”+ 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变量？

如果是，那么我认为它被替换为使用相同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();
                }
}

如何使用v-for index作为href的值

2 个答案: