0

Am having this issue of my component not displaying data even when I do `@{{ $data | json }}. Below is the code am working with

app.js

import Vue from 'vue';
import VueResource from 'vue-resource';
import Project from './components/Project.vue';
Vue.use(VueResource);

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

project.vue

<template>
    <div class="columns is-multiline">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                projects: []
            }
        },

        ready() {
            this.fetchProjects();
            //alert('ready');
         },

        methods: {
            fetchProjects() {
                this.$http.get('api/projects').then(function(projects) {
                    this.$set('projects', projects.data);
                });
            }
        }
    }
</script>

my view

<project>
    <div class="column is-one-third" v-for="project in projects">
      <div class="card is-fullwidth">
        <a href="projects/@{{ project.slug }}">
            <div class="card-content has-text-centered">
              <div class="content">
                <h3 class="title">
                    @{{ project.title }}
                </h3>

                <small>@{{ project.slug }}</small>

                @{{ project.description }}
              </div>
            </div>
        </a>
      </div>
    </div>
</project>

This was working fine before I decided to make it a component.

EDIT I think the issue is from the <slot></slot> part, cause if I include everything in the component template like this:

<template>
    <div class="columns is-multiline">
        <div class="column is-one-third" v-for="project in projects">
          <div class="card is-fullwidth">
            <a href="projects/{{ project.slug }}">
                <div class="card-content has-text-centered">
                  <div class="content">
                    <h3 class="title">
                        {{ project.title }}
                    </h3>

                    <small>{{ project.slug }}</small>

                    {{ project.description }}
                  </div>
                </div>
            </a>
          </div>
        </div>
    </div>
</template>

it working with the above, but not with this:

<template>
    <div class="columns is-multiline">
        <slot></slot>
    </div>
</template>

Is it that am using the <slot></slot> wrongly?

ammezie
  • 355
  • 5
  • 20
  • There are many things here that could go wrong, can we take a look at the response from the API? On the other hand, why are you prefixing everything with `@`? –  Jul 27 '16 at 03:23
  • Am prefixing with @ because rendering the view in a blade file and blade also uses the {{}} syntax. So in order to tell blade to ignore them allow Vue handle them, hence the @ prefix. – ammezie Jul 27 '16 at 06:49

1 Answers1

0
<slot></slot>

is not supposed to be in your template but in your html

user10535517
  • 15
  • 6