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

您根本不需要if子句。要获取所选项目的索引，请使用v-model="value"（就像您已经做过的那样，只是'fruits'可能是错误的），并用以下这段小代码替换if子句：

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

我已经更新了您的提琴here

Answer 2

您需要做几件事，

您在fruits上用作v-model的{{1}}没有任何引用，这意味着未在任何地方声明它。因此，请确保使用已声明的模型，v-slider已声明但从未使用过，因此可以使用具有模型的模型。
在滑块和文本值（代表这样，您就可以消除所有value的位置。

例如这样

ifs

这是您更新的代码笔https://codepen.io/jayas/pen/QzLrZd

更新Vuetify滑块上的值

2 个答案: