Vue.js 挂载方法被调用两次

Question

this.fillForm()我的 Vue 组件C (EditComment) 的方法被调用了两次，但我无法理解为什么。我尝试使用uuid，但不知道知道它beforeCreate被调用两次有什么帮助。

有 3 个组件。以下是相关部分：

组分A：

showCommentDialog: function(recordNumber) {
  this.$modal.show(
    ShowComment,
    {
      commentRecId: recordNumber
    },
    {
      draggable: true,
      width: 400,
      height: 250
    },
    {
      closed: function(event) {}
    }
  );

组分B：

    <EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>
  </div>
</template>

<script>
import * as $ from "jquery";
import EditComment from "./EditComment.vue";


export default {
  props: ["commentRecId"],
  data: function() {

有了这个功能

editItem: function(){
      this.showEdit = true;
      console.log("editItem function() called!");
      var playerID = this.$store.state.selectedPlayer.ID;

      this.$modal.show(
              EditComment,
              {
                text: playerID
              },
              {
                draggable: true,
                width: 400,
                height: 400
              })
    }

组分C：

<script>
    import * as $ from "jquery";
    import DatePicker from "vue2-datepicker";

    let uuid = 0;

    export default {
        props: ["text", "commentRecId"],
        beforeCreate() {
            this.uuid = uuid.toString();
            uuid += 1;
            console.log("beforeCreate() uuid: " + this.uuid);
        },
        components: { DatePicker },
            data: function() {
                return {
                    commentData: {
                        comment: "",
                        customDate: ""
                    },
                    selectedCategory: "",
                    lang: {
                        default: "en"
                    },
                }
            },
            mounted: function() {
                // console.log("this._uid: " + this._uid);
                this.fillForm();
            },
        methods: {
            fillForm: function(){

任何帮助表示赞赏。

Answer 1

如果我正确理解你的问题，你用 editItem 方法的这一部分触发了组件 C：

this.$modal.show(
   EditComment,
   {
      text: playerID
   },
   {
      draggable: true,
      width: 400,
      height: 400
   })

如果我是对的，那么你的方法有错误：

当您使用 v-if 时，vue 会触发您的组件，并重置您之前传递给它的所有值，例如 props、数据值（除了您的 uuid，因为它不是数据属性）

因此，在您的方法中，您可以使用以下命令触发组件两次：

this.showEdit = true;

无论如何...要解决此问题，请尝试以下方法：

1. 首先，使用“v-show”而不是“v-if”
2. 然后通过 this.$modal.show() 显示你的组件

我希望能有所帮助