[Vuejs]-Rendering data in Vue

by

0👍

The data should be an array because you actually need render item list. If you store it in object, you need to extract key/value mapping, and flatten to array. Because you question actually has nothing to do with the parse, so i set the data directly into vue data.

There are 4 problems:

  1. you should store data in array, not object

  2. you should not set template attribute in vue instance, it’s used for component, not the root instance

  3. your card html code should live inside in #app, otherwise, it can’t be recognize

  4. your card code loop, should not set id=’card’, id should be unique

check this JSFiddle example, 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"
        }
    ]}
  }
})

If you need to write code like <Card key={index} index={index} item={item}/>, all you need to do is just extract your card html code to a component’s template.

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

0👍

In addition to seaify’s answer, if you register card as a component and iterate via v-for

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

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

then you have to take care of that you may have some performance issues because of the reactivity system. In Vue.js, initializing a component is a little bit expensive.

If you really need to iterate a component, you should use a functional component: https://vuejs.org/guide/render-function.html#Functional-Components

Iterating a normal component is about 6~10x slower than functional component on my computer. Here is a simple performance test, iterate a component 2000 times (about 400 ~ 600 ms):
(open dev console to see the result)
http://codepen.io/CodinCat/pen/yaGAWd?editors=1010

vs functional component (about 40 ~ 60 ms):
http://codepen.io/CodinCat/pen/XjowAm?editors=1010

Leave a comment