Question

我正在尝试创建一个单页应用程序，并希望将数据传递给子视图。

我通过Axios读取了API，可以登录到控制台并读取。但是，当在子视图中渲染数据时，出现错误[[Vue warn]：在实例上未定义属性或方法“ outputs”，但在渲染过程中引用了该属性。请确保该属性是可反应的，无论是在data选项中，或对于基于类的组件，通过初始化属性。请参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。”

app.js
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';


import '../../node_modules/nprogress/nprogress.css';

const axios = require('axios');


Vue.use(VueRouter);



const app = new Vue({
    el: '#app',

    data: function() {
        return {
            outputs: []
        }
    },


    mounted() {
        axios.get('/api/output')
            .then((response) => {
                this.outputs = response.data;
                console.log(this.outputs);
            })
            .catch((err) => {
                console.log(err);
            });



    },

    router:new VueRouter(routes),

});

Outputs.vue
<template>
    <div><div class="text-grey-darkest font-normal uppercase text-3xl font-bold leading-none mb-3">Outputs</div>
    <ul>
        <li v-for="(journal_id) in outputs" v-text="journal_id"></li>

    </ul>
    </div>
</template>

<script>

    export default{};
</script>

数据结构 JSON

在子视图中以Li呈现数据。

Answer 1

需要将数据添加到组件，而不是基本Vue实例。

例如，在Outputs.vue

<template>
    <div>
        <div class="text-grey-darkest font-normal uppercase text-3xl font-bold leading-none mb-3">Outputs</div>
        <ul>
            <li v-for="(journal_id) in outputs" v-text="journal_id"></li>
        </ul>
    </div>
</template>

<script>
    const axios = require('axios');

    export default {
        data() {
            return {
                outputs: [],
            };
        },
        mounted() {
            axios.get('/api/output')
                .then((response) => {
                    this.outputs = response.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }; 
</script>

将数据传递到子视图

1 个答案: