How to pass default value to props?

Question

Vue.js

всем добра!)
есть   у родителя такая дата

    data () {
      return {
        сards: [
            {
               id: 1
                title: 'парк',
                name: 'остров',
            },
            {
              id: 2,
              title: 'пляжный',
              name: 'озеро',
            },
        ]
      }
   }
потом передаю в props
 props: ['card']
 и использую в
<blockquote>
<template>
    <div class="places__item"
            data-id="card.id">
     <div class="places__item-info">
        <div class="places__item-title">{{ card.title }}</div>
        <div class="places__item-name">{{ card.name }}</div>
      </div>
    </div>
</template>
</blockquote>
хочу чтобы вначале у child по default были значение в card.id,card.name,card.title.
если присвоить через  data child выдает ошибку.
вычитал что нужно в props передать объект и в нем указать, какое значение default.
а как реализовать понять не могу?!
помогите пжл?!)

Answer 1

You just need to set default values ​​in the component: https://jsfiddle.net/wostex/63t082p2/14/

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
<child></child>
</div>

Vue.component('child', {
  props: {
    card: {
      type: Object,
      default: function() {
      	return {
          id: 0,
          name: 'default name',
          title: 'default title'
      	}
      }
    }
  },
  template: `<p>{{ card.id }} |  {{ card.name }} | {{ card.title }}</p>`
});

new Vue({
  el: '#app',
});

Answer 2

Another option: https://jsfiddle.net/kulakoff/f8aw0cxf/