如何将数据推送到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) !!} );@endforeachapp.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是未定义的。这可能是因为它在不同的范围内的某个地方……或者某事/但错误是真实的——所以，听一下——并找出为什么它没有在你使用它的地方定义。