如何将数据推送到 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
... 

但它给我一个错误：无法读取未定义的属性'push' 如果我使用临时 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'>

  <li v-for='flashMessage in flashMessages'>
    {{flashMessage}}
  </li>

</ul>

.

const app = new Vue({
  el: '#app',
  data() {
    return {
      flashMessages: [
        "Hellow. Something is wrong!",
        "Another message",
      ],
    };
  },
});


app.flashMessages.push("A message from Push");

这是一个最小的可行示例：https://jsfiddle.net/sheriffderek/fyb0j5rt/

您需要缩小范围。

它告诉你app.vueFlashes 是未定义的。这可能是因为它在不同范围内的某个地方......或某事/但错误是真实的 - 所以，听听 - 并追踪为什么它没有在你使用它的地方定义。