如何在F7+Vue中通过v-for循环更新accordion-item标题

Hey there, your approach is on the right track! The main adjustment you need to make is how you bind the dynamic title value to the accordion item component. In Vue, when passing dynamic values to component props, we use v-bind (or its shorthand :) instead of mustache syntax {{}} directly in the attribute.

Here's the refined, working version of your code:

<f7-list-item 
  v-for="(value, index) in myList" 
  :key="index" 
  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>

A couple of key improvements to note:

• Added :key="index" to the v-for loop. Vue requires a unique key for list items to efficiently track changes and re-render components correctly. If your myList objects have a unique identifier (like value.id), use that instead of index for optimal performance.
• Replaced title="{{value.Title}}" with :title="value.Title". This properly binds the Title property from each array object to the accordion item's title prop, which is the standard Vue way to pass dynamic values to component attributes.

With this code, every object in your myList array will generate an accordion item with its Title as the header, and the inner content will display the corresponding foo and boo properties when expanded.

内容的提问来源于stack exchange，提问作者jremi