Vue组件未显示数据

Question

即使我执行`@ {{$ data | json}}。下面是正在使用的代码

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>

我的看法

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