VueJS get v-model value to methods

Question

excuse me, i use vuetify for carousel component and i want set duration carousel per slide

template :

<v-carousel cycle :interval="interval" v-model="onSlideChange">
       <v-carousel-item>First Item</v-carousel-item>
       <v-carousel-item>Second Item</v-carousel-item>
       <v-carousel-item>third Item</v-carousel-item>
</v-carousel>

data:

data() {
    return {
      interval: 1000,
      onSlideChange: null,
    };
}

getValue(slideNumber) {
    if (slideNumber === 0) {
      this.interval === 500;
    } else if (slideNumber === 1) {
      this.interval === 800;
    } else {
      this.interval === 1000;
    }
},

i get value 0, 1, 2 carousel slide from v-model="onSlideChange" if i use this code on template

{{ onSlideChange }}

question: how i get value from v-model to methods ? i use @input="handleInput($event.target.slideNumber)" but not work if

<v-carousel cycle :interval="interval" v-model="onSlideChange" @input="getValue($event.target.slideNumber)">

you can access `onSlideChange` in methods with `this.onSlideChange` — Mohsen, Jan 21 '21 at 07:15
yeah i am try ```this.onSlideChange = slideNumber;``` and call ```{{this.interval}}``` but not change — Nurrochmat Saptoaji, Jan 21 '21 at 07:29
i think ```v-model="onSlideChange"``` and ```@input="getValue($event.target.slideNumber)"``` can't use in 1 tag — Nurrochmat Saptoaji, Jan 21 '21 at 07:34

score 1 · Answer 1 · answered Jan 21 '21 at 08:25

Solved by anonim? (i am forgot because he hidden/deleted this comment):

use watch

watch: {
    onSlideChange(newVal) {
      if (newVal !== null) this.getValue(newVal);
    },
  },

and call methods


methods: {
    getValue(slideNumber) {
      if (slideNumber === 1) {
        this.interval = 500;
      } else if (slideNumber === 2) {
        this.interval = 800;
      } else {
        this.interval = 5000;
      }
    },
  },

thank you very much Mr. anonim and Mr. Mohsen

VueJS get v-model value to methods

1 Answers1