时间戳

首页 > 解决方案 > 如何在 Vue.js 中将变量推送到另一个组件数组

laravel - 如何在 Vue.js 中将变量推送到另一个组件数组

问题描述

我用 Vue.js 和 Laravel 创建了两个组件（FormComponent 和 ListComponent）。在表单中我应该输入一个电影名称，然后当我单击输入按钮时，我应该在位于 ListComponent 的电影列表中看到新电影......但是我无法做到这一点。我正确地提醒新电影，但我看不到列表中的新电影。

表单组件：

<template>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="movie">Movie:</label>
                <input type="text" class="form-control" v-bind:placeholder="movie_default" v-model="movie_default" id="movie">
            </div>
            <input type="button" value="Submit" @click="add_movie()">
        </form>
    </div>
</template>

<script>

    export default {
        mounted() {
            console.log('Form Component mounted.')
        },
        data() {
            return {
                movie_default: 'Rainman'
            }
        },
        methods: {
            add_movie () {
                alert(this.movie_default);
            }
        }
    }
</script>

列表组件：

<template>
    <div class="container">
        <ol>
            <li v-for="movie in movie_list" :key="movie">
                {{ movie }}
            </li>
        </ol>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('List Component mounted.')
        },
        data() {
            return {
                movie_list: [ 'Titanic', 'Profondo rosso']
            }
        }
    }
</script>

表.blade.php

<div id="app">
    <div class="row">
        <div class="col-sm-6">
            <form-component></form-component>
        </div>
        <div class="col-sm-6">
            <list-component></list-component>
        </div>
    </div>
</div>

标签： laravelvuejs2

解决方案

你有一些不同的方法来解决你的问题。我会建议你最简单的我认为你想要完成的结果。

创建第三个组件 my-form，如下所示：

       myForm.vue
         <template>
           <div class="row">
             <div class="col-sm-6">
                <form-component @new-movie="addNewMovie"></form-component>
             </div>
             <div class="col-sm-6">
                <list-component :movies="movies_list"></list-component>
             </div>
            </div>
         </template>

    <script>
        export default {
        name: "myForm.vue",

        data() {

            return {

                movies_list: [],
                new_movie: ""
            }
        },
        methods: {
         addNewMovie(movie){
             this.movies_list.push(movie)
           }
       }
      }
    </script>

然后编辑您的 FormComponent 以在单击时发出新值：

methods: {
            add_movie () {
                alert(this.movie_default);
                this.$emit('new-movie',this.movie_default);
            }

和您的 ListComponent 使用道具而不是状态来显示电影列表：

export default {
    props:['movies'],
    data() {
        return {
        }
    }

并更新您的 v-for 以使用该道具：

        <li v-for="movie in movies" :key="movie">

另一种方法是使用集中式存储（vuex）在组件之间共享状态

推荐阅读