子组件的安装速度比父组件快

Question

我使用 Laravel 和 Vue。我有两个组件：父母和孩子。

家长：

<template>
    <div>
        <sport-sites-add :applications-all-list="applicationsAll"></sport-sites-add>

        <table class="table">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Application id</th>
                <th scope="col">Name</th>
                <th scope="col">Description</th>
                <th scope="col">Picture</th>
                <th scope="col">URL</th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="sportSite in sportSites">
                <th scope="row">{{ sportSite.id }}</th>
                <td>
                    <template v-for="application in sportSite.applications">
                        id {{ application.id }} => {{ application.name }} <br>
                    </template>

                </td>
                <td>{{ sportSite.name }}</td>
                <td>{{ sportSite.description }}</td>
                <td>
                    <img style="width: 100px; height: 100px;" :src="sportSite.image" >
                </td>
                <td>
                    <a :href="sportSite.url" target="_blank">{{ sportSite.url }}</a>
                </td>
                <td>

                </td>
            </tr>

            </tbody>
        </table>
    </div>
</template>

<script>
    import { EventBus } from '../../app';

    export default {
        name: "SportSitesTable",
        mounted(){
            this.loadTable();
            this.getApplications();
        },
        methods:{
            loadTable: function () {
                window.axios.get('/sport_sites_all')
                    .then(resp => {
                        this.sportSites = resp.data.data;
                    }).catch(err => {

                    console.error(err);
                });
            },
            getApplications: function () {
                window.axios.get('/applications/all')
                    .then(resp => {
                        this.applicationsAll = resp.data.applications.data;
                    }).catch(err => {
                    console.error(err);
                });
            }
        },
        data(){
            return {
                sportSites: [],
                applicationsAll: [],
            }
        },
    }
</script>

孩子：

<template>
    <div>
        <button type="button" class="btn btn-primary my-2" data-toggle="modal" data-target="#sportSiteAdd">
            Add
        </button>

        <div class="modal fade" id="sportSiteAdd" tabindex="-1" role="dialog" aria-labelledby="sportSiteAddLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="sportSiteAddLabel">Add sport site</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <ul class="alert-danger">
                            <li v-for="error in errors">
                                {{ error[0] }}
                            </li>
                        </ul>

                        <form>
                            <div class="form-group">
                                <label for="name">Title</label>
                                <input type="text" class="form-control" id="name" name="name" v-model="formFields.name">
                            </div>

                            <div class="form-group">
                                <label for="image">Picture</label>
                                <input type="text" class="form-control" id="image" name="image" v-model="formFields.image">
                            </div>

                            <div class="form-group">
                                <label for="url">URL</label>
                                <input type="text" class="form-control" id="url" name="url" v-model="formFields.url">
                            </div>

                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea class="form-control" id="description" name="description" v-model="formFields.description"></textarea>
                            </div>

                            <div>
                                <label class="typo__label">Applications </label>
                                <multiselect v-model="formFields.applications"
                                             tag-placeholder="Applications"
                                             placeholder="Search"
                                             label="name"
                                             track-by="id"
                                             :options="applications"
                                             :multiple="true"
                                             :taggable="true">
                                </multiselect>
                            </div>

                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" v-on:click="submit">Save</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { EventBus } from '../../app';
    import Multiselect from 'vue-multiselect'

    export default {
        name: "SportSitesAdd",
        props: ['applicationsAllList'],
        methods:{
            submit: function (e) {
                window.axios.post('/sport_site/add/', this.formFields)
                    .then(res => {
                        console.log('Saved!');
                        $('#sportSiteAdd').modal('hide');

                        this.formFields.name = '';
                        this.formFields.image = '';
                        this.formFields.url = '';
                        this.formFields.description = '';

                        EventBus.$emit('reloadApplicationsTable');
                    }).catch(err => {
                    if(err.response.status === 422){
                        this.errors = err.response.data.errors || [];
                    }
                    console.error('Error of saving!');
                });
            },

        },
        data(){
            return {
                formFields: {
                    name: '',
                    image: '',
                    url: '',
                    description: '',
                    applications: this.applicationsAllList,

                },
                errors: [], 
            }
        },
        components: {
            Multiselect
        },
    }

</script>

父组件是一个表格。子组件是表格的一种形式。我通过道具将数据从父母传递给孩子：

<sport-sites-add :applications-all-list="applicationsAll"></sport-sites-add>

在子组件中，我有一个用于创建多选的插件。该插件需要“选项”和“值”集合。这很简单，我的案例的文档在这里https://vue-multiselect.js.org/#sub-tagging。结果我想看到以下内容：选择上的所有项目都被选中。但是在安装子组件期间我只有空集合。我在“选择”上有可用的项目，但我不知道如何使其默认选中。显然，我需要将applicationsAllList 复制到子组件的本地data() 中并使用它。但它在挂载期间和挂载之前不可用。 console.log 告诉我孩子更快。

Answer 1

你缺少@tag function & v-model，在这种情况下，必须是数组，你需要直接在options上使用applicationsAllList props

                            <multiselect v-model="formFields.value"
                                         tag-placeholder="Applications"
                                         placeholder="Search"
                                         label="name"
                                         track-by="id"
                                         :options="applicationsAllList"
                                         :multiple="true"
                                          @tag="addTag"
                                         :taggable="true">
                            </multiselect>

在方法中添加addTag函数并添加value作为数组

  data() {
    return {
      formFields: {
        name: '',
        value: [],
        image: '',
        url: '',
        description: '',
      },
      errors: [],
    }
  },
  methods: {
    addTag (newTag) {
      const tag = {
        name: newTag,
        code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
      }
      this.options.push(tag)
      this.value.push(tag)
    }
  }