Double V-Model in Vue JS

Question

I have a Range Slider veeno

and i whant return 2 values in template, min value and max value In the model, I can only bind to one parameter, but I need several, such as the maximum value and minimum value How do I implement a dual v-model?

This my template

veeno(
    connect
    v-model="getParamsJson.price"

    :tooltips="[true, true]"
    :handles="getParamsJson.price.handles"
    :range = "getParamsJson.price.range"
    :step="100"
)

| {{ getParamsJson.price }}

This my data()

getParamsJson = {"date": setDate,
    "price": {
        "handles" : [2000, 2650],
        "range" : { 'min': 1300, 'max': 3250 }
    },
}

user_5962802 · Answer

If you want to have more than one two-way bindings you can use the .sync modifier:

export default
{
  props:
  {
    minValue:
   {
     type: Number,
     default: 0
   },
   maxValue:
   {
     type: Number,
     default: 0
   },
  },
  computed:
  {
    currentMin:
    {
      get()
      {
        return this.minValue;
      },
      set(val)
      {
        this.$emit('update:min-value', val);
      }
    },
    currentMax:
    {
      get()
      {
        return this.maxValue;
      },
      set(val)
      {
        this.$emit('update:max-value', val);
      }
    },
  }
}

Double V-Model in Vue JS

1 Answers