javascript – Vue.js – 同一类型的两个组件将无法正确切换

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Vue.js – 同一类型的两个组件将无法正确切换，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4184字，纯文字阅读大概需要6分钟。

内容图文

我在另一个组件的模板中有两个组件,根据单击“回复”和“编辑”按钮进行切换.

<comment-form :model="model" :model-id="modelId" :comment="comment" v-if="showEditForm && canComment" @closeForm="closeForm"></comment-form>
<comment-form :model="model" :model-id="modelId" :parent-id="comment.id" :reply-to="comment" v-if="showReplyForm && canComment" @closeForm="closeForm"></comment-form>

现在的问题是,它永远不会因任何原因关闭第一个打开的实例.当我点击“编辑”然后“回复”时,似乎“编辑”的实例保持打开而不是关闭它并打开“回复”实例.

这些是切换表单显示的方法：

methods: {
    closeForm: function () {
        this.showReplyForm = false;
        this.showEditForm = false;
    },
    reply: function () {
        this.showReplyForm = true;
        this.showEditForm = false;
    },
    editComment: function () {
        this.showEditForm = true;
        this.showReplyForm = false;
    },
},

我想了解这种行为的原因以及如何解决它.

这是整个comment.vue文件：

<template>
    <div class="comment">
        <div class="header">
            <div v-if="!comment.user">
                <span class="name">{{comment.name}}</span>
                wrote on
                <span class="time">{{comment.created}}</span>:
            </div>
            <div v-else>
                <span class="name">{{comment.user.username}}</span> wrote on {{comment.created}}:
            </div>
        </div>
        <div class="body">
            <template v-for="line in comment.body.split('\n')">{{line}}<br></template>
        </div>
        <div class="footer">
            <a href="#" class="reply-btn" v-on:click.prevent="reply()" v-if="!isLoginRequired || isLoggedIn">
                reply
            </a>
            <span v-if="isMyComment">
                &nbsp;&bull;&nbsp;
                <a href="#" class="edit-btn" v-on:click.prevent="editComment()">
                    edit
                </a>
                &nbsp;&bull;&nbsp;
                <a href="#" class="delete-btn" v-on:click.prevent="deleteComment()">
                    delete
                </a>
            </span>
        </div>
        <comment-form :model="model" :model-id="modelId" :comment="comment" v-if="showEditForm && canComment" @closeForm="closeForm"></comment-form>
        <comment-form :model="model" :model-id="modelId" :parent-id="comment.id" :reply-to="comment" v-if="showReplyForm && canComment" @closeForm="closeForm"></comment-form>
        <comments-list :level="level + 1" v-if="hasChildren" :model="model" :model-id="modelId" :parent-id="comment.id"></comments-list>
    </div>
</template>

<script>
export default {
    props: {
        comment: null,
        modelId: null,
        level: null,
        parentId: null,
        model: {
            type: String,
            default: null
        },
    },
    computed: {
        hasChildren: function() {
            return this.$commentsStore.getters.hasChildren(
                this.model,
                this.modelId,
                this.comment.id,
            );
        },
        canComment: function() {
            return this.$commentsStore.getters.canPost;
        },
        isLoggedIn: function() {
            return this.$commentsStore.getters.isLoggedIn;
        },
        isMyComment: function () {
            return this.$commentsStore.getters.isMyComment(this.comment);
        },
        isLoginRequired: function() {
            return this.$commentsStore.getters.getConfig('loginRequired');
        }
    },
    methods: {
        closeForm: function () {
            this.showReplyForm = false;
            this.showEditForm = false;
        },
        reply: function () {
            this.showReplyForm = true;
            this.showEditForm = false;
        },
        editComment: function () {
            this.showEditForm = true;
            this.showReplyForm = false;
        },
        deleteComment: function () {
            return this.$commentsStore.dispatch('deleteComment', this.comment);
        }
    },
    data: function() {
        return {
            showReplyForm: false,
            showEditForm: false
        };
    }
};
</script>

解决方法:

这有点疯狂,但你需要一个key.这是我见过的第一个你需要一个v-for的例子.

发生的事情是你在两个v-ifs中有相同的组件.当Vue进行更新时,它会发现它应该有一个注释表单,而且它已经有了.它不承认差异.我把它称为Vue中的一个错误,但是解决方法是为每个组件实例提供一个密钥.

new Vue({
  el: '#app',
  data: {
    showEditForm: true,
    showReplyForm: false
  },
  components: {
    commentForm: {
    	methods: {
      	close() {
        	this.$emit('close-form');
        }
      }
    }
  },
  methods: {
    closeForm: function() {
      this.showReplyForm = false;
      this.showEditForm = false;
    },
    reply: function() {
      this.showReplyForm = true;
      this.showEditForm = false;
    },
    editComment: function() {
      this.showEditForm = true;
      this.showReplyForm = false;
    },
  }
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <button @click="reply">
    Reply
  </button>
  <button @click="editComment">
    Edit
  </button>
  <comment-form v-if="showEditForm" key="edit" @close-form="closeForm" inline-template>
    <div>
      This is the edit form
      <button @click="close">
        Close it
      </button>
    </div>
  </comment-form>
  <comment-form id="reply" key="reply" v-if="showReplyForm" @close-form="closeForm" inline-template>
    <div>
      This is the reply form
      <button @click="close">
        Close it
      </button>
    </div>
  </comment-form>
</div>

内容总结

以上是互联网集市为您收集整理的javascript – Vue.js – 同一类型的两个组件将无法正确切换全部内容，希望文章能够帮你解决javascript – Vue.js – 同一类型的两个组件将无法正确切换所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---