Question

我试图在Vue中创建一个Card组件，它会从firebase中提取一些数据。在React中我几乎只使用map并渲染出<Card />组件，然后分别创建Card组件。像这样的东西

anArray.map((item, index) => return <Card key={index} index={index} item={item}/>

这会给我特定的项目，我可以从那里处理数据。我不确定如何在Vue中完成相同类型的事情。我创建了一个JSFiddle。数据和引导程序已经被拉入。我将数据存储在一个对象中。将它存储在对象或数组中是首选吗？

https://jsfiddle.net/agzLz554/

Answer 1

数据应该是一个数组，因为您实际上需要渲染项列表。如果将其存储在对象中，则需要提取键/值映射，并展平为数组。因为你的问题实际上与解析无关，所以我将数据直接设置为vue数据。

有4个问题：

您应该将数据存储在数组中，而不是对象
你不应该在vue实例中设置模板属性，它用于组件，而不是根实例
您的卡片html代码应该位于#app内部，否则无法识别
您的卡片代码循环，不应设置ID =＆＃39;卡＆＃39;，ID应该是唯一的

检查这个JSFiddle示例https://jsfiddle.net/seaify/najm1uer/

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

<div id="app">
  <div class="card" v-for="resource in resources">
  <div class="card-header">
    <!-- Author Name -->
  </div>
  <div class="card-block">
    <h4 class="card-title">{{resource.title]}}<!-- Article Title --></h4>
    <p class="card-text">{{resource.desc}}<!-- Article Description --></p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</div>


/**
 * Created by chuck on 2/11/16.
 */

var vm = new Vue({
  el: '#app',
  data () {
    return {
      resources: [
        {
        "objectId": "-KVSES7sKx-kk31gPyiz",
        "authorId": "3F14Sh3vCMXhRfZyxRPBPzn8Rdf2",
        "authorImage": "https://lh3.googleusercontent.com/-5QsKgD8Li8k/AAAAAAAAAAI/AAAAAAAABbY/v-uLFhw6k8Q/photo.jpg",
        "authorName": "Maxwell Gover",
        "desc": "Other developers actually have to use the APIs you design. So don’t let those APIs suck.",
        "quiz": [
          {
            "options": [
              {
                "isAnswer": true,
                "text": "True"
              },
              {
                "isAnswer": false,
                "text": "False"
              }
            ],
            "text": "The more dependencies you have, the more potential problems it can cause in downstream consumer code"
          },
          {
            "options": [
              {
                "isAnswer": true,
                "text": "True"
              },
              {
                "isAnswer": false,
                "text": "False"
              }
            ],
            "text": "You should try to keep your code as self contained as possible."
          }
        ],
        "timesPassed": 0,
        "title": "How to design APIs that don't suck",
        "type": "article",
        "url": "https://medium.freecodecamp.com/https-medium-com-anupcowkur-how-to-design-apis-that-dont-suck-922d864365c9#.my0qpwrp5"
      },
        {
          "objectId": "-KVSXfEragBTcqcyMTAR",
          "authorId": "3F14Sh3vCMXhRfZyxRPBPzn8Rdf2",
          "authorImage": "https://lh3.googleusercontent.com/-5QsKgD8Li8k/AAAAAAAAAAI/AAAAAAAABbY/v-uLFhw6k8Q/photo.jpg",
          "authorName": "Maxwell Gover",
          "desc": "How to prioritize improving user experience",
          "quiz": [
            {
              "options": [
                {
                  "isAnswer": true,
                  "text": "True "
                },
                {
                  "isAnswer": false,
                  "text": "False"
                }
              ],
              "text": "No matter how clever a design is, it is rendered useless if it fails to be understood."
            }
          ],
          "timesPassed": 0,
          "title": "7 Tips to Improve Your UX Strategy",
          "type": "article",
          "url": "https://uxdesign.cc/7-tips-to-improve-your-ux-strategy-5e39f5ff0a41#.n103o5inc"
        }
    ]}
  }
})

如果您需要编写<Card key={index} index={index} item={item}/>之类的代码，您只需将卡片html代码提取到组件的模板即可。

Vue.component('card', {
  template: '<div>A custom component!</div>'
})

Answer 2

除了seaify的回答，如果您将card注册为组件并通过v-for进行迭代

Vue.component('card', {...})

<card v-for="resource in resources">
    ...
</card>

然后你必须注意由于反应系统你可能会遇到一些性能问题。在Vue.js中，初始化组件有点贵。

如果您确实需要迭代组件，则应使用功能组件：https://vuejs.org/guide/render-function.html#Functional-Components

迭代正常组件比我计算机上的功能组件慢约6~10倍。这是一个简单的性能测试，迭代一个组件2000次（约400~600 ms）：
（打开开发控制台查看结果）
http://codepen.io/CodinCat/pen/yaGAWd?editors=1010

vs功能组件（约40~60 ms）：
http://codepen.io/CodinCat/pen/XjowAm?editors=1010

在Vue中渲染数据

2 个答案: