Как отобразить данные при помощи Vue js?

Question

[Даниил]

Пытаюсь отобразить данные, полученные из БД, через Vue js.

<div class="container">
  <h1>My Tasks</h1>

  <tasks list="{{ json_encode($tasks) }}" v-on:parse="getParsed"></tasks>
</div>

<template id="tasks-template">
  <div>   
    <ul class="list-group">
      <li class="list-group-item" v-for="task in list">@{{ task.id }}</li>
    </ul>
  </div>
</template>

$tasks - переменная, содержащая данные из БД.

Vue.component('tasks', {
  template: '#tasks-template',

  props: ['list'],

  created: function () {
    this.$emit('parse', this.list);    
  }
});

new Vue({
  el: '.container',

  data: {
    list: {}
  },

  methods: {
    getParsed: function ($parsedList) {
      this.list = JSON.parse($parsedList);      
    }
  }
});

В результате получаю бесконечный список:

<pre>@{{ list }}</pre> выводит json строку.

console.log(this.list); выводит объект.

Vue Devtools видит объект как просто строку:

Answer 1

[0xD34F]

Убрать emit из дочернего компонента, v-on из родительского. Параметр list - заменить статическую передачу значения на динамическую: :list="{{ json_encode($tasks) }}". Так переданное значение будет рассматриваться не как строка, а в качестве javascript выражения - применять JSON.parse не нужно.