laravel-5.2 - Vue组件不显示数据

Question

即使我执行 `@{{ $data | 我的组件也没有显示数据的问题 json}}。下面是正在使用的代码

应用程序.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 },
});

项目.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>

我的观点

<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>

在我决定将其作为组件之前，它运行良好。

编辑 我认为问题出在<slot></slot>部件上，因为如果我在组件模板中包含所有内容，如下所示：

<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>

它适用于上述内容，但不适用于此：

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

是不是用<slot></slot>错了？

Answer 1

<slot></slot> 

不应该在您的模板中，而是在您的 html 中