Vue. js смонтированный метод вызывается дважды - PullRequest
Новая
       77

Vue. js смонтированный метод вызывается дважды

0 голосов
/ 11 апреля 2020

Метод this.fillForm() моего Vue компонента C (EditComment) вызывается дважды, но мне трудно понять, почему. Я пытался использовать uuid, но не знаю, как помогает знать, что beforeCreate вызывается дважды.

enter image description here

Есть 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(){

Любая помощь приветствуется.

1 Ответ

1 голос
/ 11 апреля 2020

Если я правильно понимаю вашу проблему, вы запустили компонент C с этим разделом метода editItem: 

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

если я прав, у вас ошибка в вашем методе:

когда вы используете v-if, vue запускает ваш компонент и сбрасывает все значения, которые вы передали ему ранее, например, реквизиты, значения данных (кроме вашего uuid, потому что это не свойство данных)

, поэтому в ваш метод вы запускаете ваш компонент дважды: 

this.showEdit = true;

в любом случае ... для решения, пожалуйста, попробуйте этот способ:

  1. сначала используйте "v-show" вместо " v-if "
  2. , тогда покажите свой компонент следующим образом. $ modal.show ()

Я надеюсь, что может помочь

...