CODEWITHSUNDEEP
vue.jshtml-framework-7v-for
jremi
jremi

Reputation: 2969

How can I update the accordion-item title using a v-for loop inside F7+Vue?

How can I update the accordion-item title using a v-for loop inside F7+Vue ? I need each accordian-item title to be set to the Title of each object inside the myList array that is being looped over using the v-for.

Here is example below:

            <f7-list-item v-for="value in myList" accordion-item title="{{value.Title}}">
              <f7-accordion-content>
                <f7-block>
                  <p>{{value.foo}}</p>
                  <p>{{value.boo}}</p>
                </f7-block>
              </f7-accordion-content>
            </f7-list-item>

          </f7-list>

Upvotes: 0

Views: 320

Answers (1)

jremi
jremi

Reputation: 2969

Due to the time required for me to wrap my head around how I would use the current F7+Vue Accordion with a v-for to inject the title element... it seems that this is not possible. I could be wrong. I ended up resolving this by using the standard non f7+vue components...

example:

          <div class="list accordion-list">
            <ul>
              <li class="accordion-item" v-for="value in myList">
                <a href="#" class="item-link">
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title">{{value.Title}}</div>
                    </div>
                  </div>
                </a>
                <div class="accordion-item-content">
                  <div class="block">
                      <p>{{value.foo}}</p>
                      <p>{{value.boo}}</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>

Upvotes: 1

Related Questions