如何将数据推送到vue实例

Question

我有一个简单的 vue 实例，我想在其中使用空数组作为 data.vueFlashes。：

const app = new Vue({

    el: '#app',

    data: {

        vueFlashes: []

    }

});

组件定义如下：

<template>

    <transition name="fade">

        <div id="flash-component" v-show="visible">

            <span class="hide" @click="hide()">X</span>

            {{message.message}}

        </div>

    </transition>

</template>

<script>

    export default {

        mounted: function() {

            console.log('VUE component mounted.')

        },

        created: function()

        {

            this.show();

        },

        props: [

            'message'

        ],

        data: function() {

            return {

                visible: true

            }

        },

        methods: {

            show: function()

            {

                this.visible = true;

                setTimeout(() => this.hide(), 5000);

            },

            hide: function()

            {

                this.visible = false;

            }

        }

    }

</script>

然后我想通过这种方式从外部填充 vueFlashes：

// This is Laravel blade template

<script>

...

@foreach (session('flash_notification', collect())->toArray() as $message)

    app.vueFlashes.push( {!! json_encode($message) !!} );  // Error

@endforeach

... 

但它抛出一个错误：无法读取未定义的属性“推送” 如果我使用临时 js 数组然后将其分配给 app.vueFlashes 它可以工作：

<script>

...

let jsFlashes = [];

@foreach (session('flash_notification', collect())->toArray() as $message)

    // jsFlashes.push( {!! json_encode($message) !!} );

@endforeach

app.vueFlashes = jsFlashes;  // This works fine

这两种调用相同 app.vueFlashes 值的方法有什么区别？

Answer 1

<ul id='app'>&nbsp; <li v-for='flashMessage in flashMessages'>&nbsp; &nbsp; {{flashMessage}}&nbsp; </li></ul>.const app = new Vue({&nbsp; el: '#app',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; flashMessages: [&nbsp; &nbsp; &nbsp; &nbsp; "Hellow. Something is wrong!",&nbsp; &nbsp; &nbsp; &nbsp; "Another message",&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; };&nbsp; },});app.flashMessages.push("A message from Push");这是一个最小可行的例子：https ://jsfiddle.net/sheriffderek/fyb0j5rt/你需要缩小范围。它告诉你这app.vueFlashes是未定义的。这可能是因为它在不同的范围内的某个地方……或者某事/但错误是真实的——所以，听一下——并找出为什么它没有在你使用它的地方定义。