Question

我是Vuejs的新手（我正在学习）。我尝试使用Vuejs2在同一页面中做很多模态像许多人一样，我有这个控制台警告：

[Vue警告]：避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。而是根据prop的值使用数据或计算属性。支持变异：

我读了官方文件。我知道我试图改变一个道具，现在用vuejs2它不再可能。我尝试使用数据和计算方法，但仍然无法正常工作。我知道道具现在是单向的，我认为我明白我需要$发出一些道具

这是我的代码：

app.js

Vue.component('modal', Modal);

Vue.component('modal-add-equipe', ModalContent);

Vue.component('modal-user-team', ModalContentTeamUser);
    new Vue({
        delimiters: ['${', '}'],
        el: '#app',
        data: {
            showModal: false,
            showModalAddEquipe: false,
            showModalUserTeam: false
        },
        methods: {
            openModal: function(name) {
                console.log(this.$refs[name]);
                this.$refs[name].show = true;
                //this.showModal = true;
            },
            closeModal: function(name) {
                this.$refs[name].show = false;
                //this.showModal = false;
            }
        }
    })

Modal.vue

<template>
    <transition name="modal">
        <div class="modal-mask" @click="close" v-show="show">
            <div class="modal-wrapper">
                <div class="modal-container with-border" @click.stop>
                    <slot></slot>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {

    props: ['show', 'onClose'],
    methods: {
        close: function () {
            this.onClose();
        }
    },

    ready: function () {
        document.addEventListener("keydown", (e) => {
            if (this.show && e.keyCode == 27) {
                this.onClose();
            }
        });
    }


}

</script>

ModalContent.vue

<template>
    <modal :show.sync="show" :on-close="close">
        <div class="modal-header">
            <slot name="header">
                default header
            </slot>
        </div>

        <div class="modal-body">
            <slot name="body">
                default body
            </slot>
        </div>

        <div class="modal-footer">
            <slot name="footer">

            </slot>
        </div>
    </modal>
</template>

<script>
var Modal = require('./Modal.vue');

export default {
    props: ['show'],
    methods: {
        close: function () {
            this.$emit('close', false);
        },
    },
    components:{
        'modal': Modal
    }
}
</script>

树枝上的电话：

{% for user in usersTeamed %}
<span @click="openModal('userTeam{{ user.getId() }}')"><strong>Equipes</strong></span>
    <modal-user-team ref="userTeam{{ user['id'] }}" :show.sync="showModal" @close="closeModal('userTeam{{ user['id'] }}')">
        <h3 slot="header">{{ 'equipe_modal_user_equipe'|trans }}</h3>
        <div slot="body">
            {{ form_start(formUsersTeamed[user['id']]) }}
            {{ form_rest(formUsersTeamed[user['id']]) }}
            {{ form_end(formUsersTeamed[user['id']]) }}
        </div>
    </modal-user-team>
    {% endfor %}

我的目标是打开一个模态（但在同一页面中有很多并避免像示例https://vuejs.org/v2/examples/modal.html那样的1k变量），通过＆＃34; rel＆＃34;

此代码正常运行，但我有控制台工作！如果有人可以帮助我，请：）

PS：我还使用了vueify，babelify和aliasify

PS2：对不起我的英文

Mutliple Modals在同一页面Vuejs 2中

0 个答案: