C
C
ceeed2021-10-04 19:11:01
Vue.js
ceeed, 2021-10-04 19:11:01

How can I make it so that when the method is called, the data in the select does not disappear?

I have a SELECT in which the user selects a user, after which a table with data is displayed. I also have an EDIT button that stops the reactive update of the table. There is also a CANCEL button that resumes updating the table. After I stop the table with the EDIT button and then resume the table with the CANCEL button, my user in SELECT disappears. The point is in the method that resumes updating the data. How can I make sure that the data in SLELECT does not disappear after pressing the CANCEL button?

SELECT

<vSelect
    :modelValue="$store.state.calculator.users"
    :options="users"
    :label="$t('Select_user_admin')"
    @input="handleUsersSelect"
    class="underlying select-gradient"
  >
  </vSelect>

EDIT
<button class="btn test" @click="onClickEditButton">
      {{ $t("edit") }}
    </button>

CANCEL
<v-button
          class="button-cancel"
          @upGetStatisctics="cancelOrder"
          >{{ $t("back") }}</v-button
        >

EDIT button method
onClickEditButton() {
  if (this.activeTab === 1) {
    this.isEditing = true;
    clearInterval(this.timerId);
  } else if (this.activeTab === 2) {
    this.isEditingPosition = true;
    clearInterval(this.timerId);
  }
},

CANCEL button method
cancelOrder() {
  if (this.activeTab === 1) {
    this.isEditing = false;
    this.handleUsersSelect();
  } else if (this.activeTab === 2) {
    this.isEditingPosition = false;
    this.handleUsersSelect();
  }
},

The method that sets the user
async handleUsersSelect(userId) {
  clearInterval(this.timerId);
  this.$store.commit("calculator/setUserSiteAdmin", userId);

  this.timerId = setInterval(async () => {
    const marginsResponse = await this.fetchCleintTableInfoByTab({
      userId,
      url: "/admin/margins",
    });
    const positionsResponse = await this.fetchCleintTableInfoByTab({
      userId,
      url: "/admin/positions",
    });
    console.log("$store", this.$store.state.calculator.users);
    this.margins = this.convertMargins(marginsResponse);
    this.positions = this.convertPositions(positionsResponse);
  }, 2000);
},

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question