javascript - 更新 Vuetify slider 上的值

Question

我想要做的是在 slider 位置移动时更新值。

[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. 您在 v-slider 上用作 v-model 的 fruits 没有任何引用，这意味着它没有在任何地方声明。因此，请确保使用已声明的模型，value 已声明但从未使用过，因此您可以使用具有您的模型的模型。
2. 在 slider 和代表的文本值上使用模型 slider 的位置，这样您就可以消除所有 if。

比如这个

<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