将数据从父模式传递到子模式 - Vue.js

Question

我试图将一些数据从父组件传递到作为模态的子组件。 出于某种原因，向我抛出的错误是“Uncaught TypeError: Cannot set property 'domain' of undefined”。 我正在尝试使用其键传递父组件项，然后在父组件中找到此元素，然后在子组件中找到数据变量。 有人可以告诉我我错过了什么吗？ 谢谢！

这是我的父组件 Domain.vue

<template>
    <div class="container">
        <div class="form-group">
                <input type="text" class="form-control" id="filter" placeholder="Filter the Domains">  
        </div>

        <div class="row content-holder">
            <table>
                <thead>
                    <tr>
                        <th class="client-name">Domain</th>
                        <th class="client-pm">Client</th>
                        <th class="client-pm">Add Log on Domain</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="domain in domains" :key="domain.id" :domain="domain" class="tr-table">
                        <td class="client-name">{{ domain.url }}</td>
                        <td class="client-pm">{{ domain.client }}</td>
                        <td class="client-pm center"><i class="fas fa-plus jobs-page" data-toggle="modal" @click="openAdd(domain)"></i></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <Add :openmodal="addActive" @closeRequest='close'></Add>

    </div>
</template>

<script>

import axios from 'axios';
let Add = require('./Add.vue');

    export default {

        name:'Domain',

        data(){
            return {

                addActive:'',
                domains: [],
                domain: {id:'', url:'', client: ''},
                errors:{}
            }
        },

        methods:{

            getDomains(){
                window.axios.get('/develogger-app/public/api/domains').then(({data})=>{
                    data.forEach(domain =>{
                        this.domains.push(domain)
                    });
                });
            },

            openAdd(key){
                this.$children[1].domain = this.domains[key];
                this.addActive = 'is-active';

            },

            save(){

            },

            close(){
                this.addActive = '';
            },

        },

        created(){
            this.getDomains();
        },



        components:{
            Add
        }



    }



</script>

这是子组件 Add.vue

<template>
        <!-- Modal -->
            <div :class="openmodal" class="modal fade" id="exampleModalCenter" tabindex="-1" >
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Create new Log</h5>
                        <button type="button" class="close">
                            <i class="fas fa-times" @click="close"></i>
                        </button>

                    </div>
                    <div class="modal-body">
                        <form method="post">
                            <input type="hidden" name="_token" :value="csrf">

                            <input name="website" type="text" id="website" class="form-control" placeholder="Log Title"><br>

                            <select id="type" class="form-control" name="type"><br>
                                <option></option>
                            </select>

                            <br>

                            <select id="type" class="form-control" name="type"><br>
                                <option value="" disabled selected>Type</option>
                                <option>Client Update</option>
                                <option>Dev Update</option>
                                <option>Bug</option>
                                <option>Style Fix</option>
                            </select>

                            <br>

                            <label class="left" for="description">Log Description:</label>
                                <textarea class="form-control" rows="5" id="description" name="description"></textarea>
                            <br>

                            <div class="left">
                                <input  type="checkbox" name="tell-everyone" id="tell-everyone">
                                <label for="description">Tell Everyone?</label>
                                <br>
                                <input type="checkbox" name="status" id="status" value="checked">
                                <label for="checked">Resolved and Tested?</label>
                            </div>
                        </form>   
                    </div>
                    <div class="modal-footer">
                        <button  id="log-it" type="button" class="btn btn-circle btn-xl" data-dismiss="modal">
                            <span  id="button-content"><b>LOG IT</b></span>
                            <span  id="button-content"><b>FIX IT</b></span>
                        </button>
                    </div>
                    </div>
                </div>
            </div>
</template>

<script>
export default {
    // checked:false,
    name:'Add',
    props:['openmodal'],

    data(){
            return{
                domain:'',
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            }
    },

     methods:{
        close(){
            this.$emit('closeRequest');
        }
    },

    // computed: {
    //         isComplete () {
    //             return this.log.title && this.log.domain_id && this.log.type && this.log.description;
    //         }
    //     },
}
</script>

Answer 1

您将data指定为主 Vue 实例中的函数。 它应该是

主 Vue 实例中的一个对象：

data: {
    ....
}

而组件中的一个函数：

data() {
    return {...}
}

见官方参考。

您将data作为两者的功能。