Обновление значения на Vuetify Slider

Question

Я пытаюсь обновить значение, когда положение ползунка изменилось.

[codepen] https://codepen.io/JakeHenshall/pen/WLezNg

<div id="app">
   <v-app id="inspire">
<v-card flat color="transparent">

  <v-subheader>Tick labels</v-subheader>

  <div v-if="value == 0">
     {{ ticksLabels[0] }}
  </div>
  <div v-else-if="value === 1">
    {{ ticksLabels[1] }}
  </div>
  <div v-else-if="value === 2">
    {{ ticksLabels[2] }}
  </div>
        <div v-else-if="value === 3">
    {{ ticksLabels[3] }}
  </div>
  <div v-else>
    {{ ticksLabels[4] }}
  </div>

  <v-card-text>
    <v-slider
      v-model="fruits"
      :tick-labels="ticksLabels"
      :max="4"
      step="1"
      ticks="always"
      tick-size="2"
    ></v-slider>
  </v-card-text>
</v-card>

Javascript:

new Vue({
    el: '#app',
    data () {
      return {
        value: 0,
        ticksLabels: [
          '0 - £5k',
          '£5k - £10k',
          '£10k - £25k',
          '£25k - £50k',
          '£50k+'
        ]
      }
    }
  })

Любая помощь с этим была бы полезной, и некоторая информация о том, как привести в порядок оператор if, была бы полезной.

Спасибо.

Answer 1

Есть несколько вещей, которые вы должны сделать,

1. fruits, который вы используете как v-model на вашем v-slider, не имеет ссылки вообще, означая, что он нигде не объявлен,Поэтому убедитесь, что вы используете модель, которая объявлена, value была объявлена, но никогда не использовалась, чтобы вы могли использовать ее с вашей моделью.
2. Используйте модель как на ползунке, так и текстовое значение, представляющее положение ползунка, чтобы вы могли исключить все ifs.

Вот такой вот

<v-text-field v-model="ticksLabels[value]"
              class="mt-0"
              type="text"></v-text-field>

<v-card-text>
  <v-slider v-model="value"
            :tick-labels="ticksLabels"
            :max="4"
            step="1"
            ticks="always"
            tick-size="2"></v-slider>

Вот ваш обновленный код ручки https://codepen.io/jayas/pen/QzLrZd

Answer 2

Вы не нуждаетесь в предложении if вообще.Чтобы получить индекс выбранного вами элемента, используйте v-model="value" (как вы уже сделали, просто «фрукты», вероятно, неправильно) и замените условие if этим крошечным фрагментом кода:

<div>
  {{ticksLabels[value]}}
</div>

I 'мы обновили вашу скрипку здесь