0

I have a vue select component, according to selection I want to change content, and show the loading screen on change event.

<template>
    <div>
        <div class="row component-separation audit-select">
            <div class="col-md-4 pull-right">
                <v-select
                    id="auditModeSelect"
                    :options="auditOptions"
                    label="label"
                    placeholder="Change Audit View Type"
                    class="form-control border-bottom"
                    v-model="auditOption"
                    @input="changeViewMode"
                    :clearable="false">
                </v-select>
            </div>
        </div>
{{loadingTheContent}}
        <div v-if="loadingTheContent">
            <loading/>
        </div>
        <div v-else>
        ....
        </div>
    </div>
</template>


    changeViewMode(selectedMode) {
        this.loadingTheContent = true;

        if (selectedMode && selectedMode.value === 1) {
            ...
        } else {
            ...
        }

        this.loadingTheContent = false;
    },

But loadingTheContent variable value is always false, not changing.

I also tried with adding custom button to trigger but same thing exists

mgnfcnt
  • 77
  • 11
  • Where is the function that changes the value invoked? Can you share more code? Also are you using the method inside the Vue object or just as you posted. Should be a Vue object with a `methods` property. – Michael Feb 19 '20 at 09:22
  • @Michael It is already in methods section, I just make it shorten. – mgnfcnt Feb 19 '20 at 09:26
  • It seems like you always make the value false at the end of your funcion `this.loadingTheContent = false;` this line is not in a conditional statement and always invoked. – Michael Feb 19 '20 at 09:44
  • @mgnfcnt your `this.loadingTheContent = false;` located outside the `if` condition. So that if condition run fast, It hasn't changed to `true` for a long time. It means `this.loadingTheContent` getting updated to `false` quickly. – gihandilanka Feb 19 '20 at 10:40
  • It was fixed with adding following this.$nextTick(() => { this.loadingTheContent = false; }); – mgnfcnt Feb 19 '20 at 15:10

0 Answers0