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中

Vue组件不显示数据

1 个答案: