Framework7循环路由内的动态内容答案

【问题标题】：Framework7 Loop Dynamic Content within RouteFramework7循环路由内的动态内容
【发布时间】：2018-07-03 02:06:53
【问题描述】：

我正在使用 Framework 7 在路由器中加载演示卡。问题是我不确定如何在模板显示中循环遍历多个记录。

这是我的路线

{
path: '/about/',
async: function (routeTo, routeFrom, resolve, reject) {
  // Requested route
  // Get external data and return template7 template
  app.request.json('data.json', function (data) {
      console.log(data);
    resolve(
      // How and what to load: template
      {
        template: `<div class="page">
                    <div class="navbar">
                        <div class="navbar-inner sliding">
                          <div class="left">
                            <a href="#" class="link back">
                              <i class="icon icon-back"></i>
                              <span class="ios-only">Back</span>
                            </a>
                          </div>
                          <div class="title">News</div>
                        </div>
                      </div>
                      <div class="page-content">
                        <div class="card demo-card-header-pic">
                              <div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"></div>
                              <div class="card-content card-content-padding">
                                <p class="date">{{Title}}</p>
                                <p>{{Header}}</p>
                              </div>
                              <div class="card-footer"><a href="/about/3/" class="link">Read more</a></div>
                            </div>
                      </div>
                    </div>`
      },
      // Custom template context
      {
        context: {
          ID: data.content.ID,
            Title: data.content.Title,
            Header: data.content.Header,
            Description: data.content.Description,
            TitleImg: data.content.TitleImg,
        },
      }
    );
  });
}

这里是示例 json：

{
"contentType": "news",
"content": [{
    "ID": 1,
    "Title": "Test",
    "Header": "Short Text",
    "Description": "lorem ipsum",
    "TitleImg": "/img/collab.jpg"
}, {
    "ID": 2,
    "Title": "Test2",
    "Header": "Short Text2",
    "Description": "lorem ipsum2",
    "TitleImg": "/img/collab.jpg"
}]

}

目前它没有显示任何内容，但我想查看这两个条目。

TAKE 2 但仍然不工作.... items 数组有我的数据，但 for 循环不起作用

{
path: '/about/',
async: function (routeTo, routeFrom, resolve, reject) {
  // Requested route
  // Get external data and return template7 template
  app.request.json('data.json', function (data) {
      for (var i = 0; i < data.content.length; i++) {
          items.push({
            ID: data.content[i].ID,
            TitleImg: data.content[i].TitleImg,
            Title: data.content[i].Title,
            Header: data.content[i].Header
          });
        }
      console.log(items);
    resolve(
      {
        template: `<div class="page">
                    <div class="navbar">
                        <div class="navbar-inner sliding">
                          <div class="left">
                            <a href="#" class="link back">
                              <i class="icon icon-back"></i>
                              <span class="ios-only">Back</span>
                            </a>
                          </div>
                          <div class="title">News</div>
                        </div>
                      </div>
                      <div class="page-content">
                        <div class="card demo-card-header-pic" v-for="item in items">
                              <div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"></div>
                              <div class="card-content card-content-padding">
                                <p class="date">{{Title}}</p>
                                <p>{{Header}}</p>
                              </div>
                              <div class="card-footer"><a href="/about/{{ID}}/" class="link">Read more</a></div>
                            </div>
                      </div>
                    </div>`
      },
      {
        items: items,
      }
    );
  });
}

编辑 - 工作解决方案感谢@djiggy

{{#each items}}
                        <div class="card demo-card-header-pic">
                            <a href="/about/{{ID}}/">
                              <div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"><div class="card-headerTxt">{{Title}}</div></div>
                              <div class="card-content card-content-padding">
                                <p>{{Header}}</p>
                              </div>
                                </a>
                            </div>
                        {{/each}}

【问题讨论】：

你能登录data.content[i]吗？
data.content[i] 记录正确。 items 数组按照我的意愿构建...我相信问题出在模板中。我只是不确定查看每个项目的语法。
哦！将 {items: items} 更改为 { context: { items: items }} 并告诉我它是否有效
尝试用 Template7 each ({{#each items}}) 替换 v-for attr 并使用 {{this.wathever}}
成功了，谢谢！

标签： vue.js vue-router html-framework-7

【解决方案1】：

当你使用数据作为 Template7 时，你必须使用 Template7 语法（参见expressions syntax section）

因此，在您的情况下，您必须将 v-for 更新为 each 块

有用的链接：Access to object with each

【讨论】：