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

Posted 2023-02-23

【中文标题】将数据从父模式传递到子模式 - Vue.js

【英文标题】：Passing data from Parent to Child modal - Vue.js

【发布时间】：2019-03-31 03:37:13

【问题描述】：

我试图将一些数据从父组件传递到作为模态的子组件。出于某种原因，向我抛出的错误是“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>

【问题讨论】：

<div :class="openmodal" class="modal fade" id="exampleModalCenter" tabindex="-1" > 您已经有一个课程，并且您正在添加另一个课程，因此它会被覆盖，请尝试在 class= 之后保留 :class

嗨@AnimeshSaraswat，刚刚做到了，我也尝试删除 class="" 但仍然无法正常工作。数据未传递给子组件。

嗨@Luiz Wynne，如果是这样，那么您可能想将您的let Add = require('./Add.vue'); 更改为import Add from '@/path'，例如：import Add from '@/components/utils/add' 如果它仍然没有加载子组件，那么我们可能会必须尝试不同的方法。

好吧，它不起作用。问题不仅是没有加载模态，而且没有将信息传递给子组件

【参考方案1】：

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

主 Vue 实例中的 对象：

data: 
    ....

当组件中有一个函数：

data() 
    return ...

请参阅official reference。

您将data 作为两者的功能。