0

ファウンデーション css と共に VueJS を使用しています。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>
4

2 に答える 2

0

OK、解決策を見つけました。メソッドにバインドし、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();
                }
}
于 2017-11-24T11:31:30.323 に答える