Vue.js mounted method called twice

Viewed 10172

The method this.fillForm() of my Vue component C (EditComment) is called twice, but I'm having trouble understanding why. I tried using uuid, but don't know how it helps knowing that beforeCreate is called twice.

enter image description here

There are 3 components. Here are the relevant parts:

Component A:

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

Component 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() {

with this 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
              })
    }

Component 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(){

Any help is appreciated.

1 Answers

If I understand correctly your problem, you fired component C with this section of editItem method:

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

if I'm right, you have a mistake in your method:

when you use v-if, vue fires your component and it resets all values which you passed it before, like props, data values (except your uuid because it's not a data property)

so in your method you fire your component twice with :

this.showEdit = true;

anyway...for solution, please try this way:

  1. first, use "v-show" instead of "v-if"
  2. then show your component by this.$modal.show()

I hope can help

Related