CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Alex T
Alex T

Reputation: 3764

Is it possible to change two values using v-model in select form in Vue?

I use v-select form where based on the item I pick I want to change two values at the same time. Now I would like to do it this way but its not really possible as of now:

<v-select
           :items="mapSelector"
           item-text="text"
           item-value1="valueA"
           item-value2="valueB"
           v-model1="data_plot[0].x"
           v-model2-"data_plot[0].y"
></v-select>

Here is the list I connected to the select form:

 mapSelector: [
        {text: "A1", valueA: [3,2,3,4,1,2], valueB: [1]},
        {text: "B2", valueB: [1,10,15,4,3,1],  valueB:[2]}
      ],

data_plot that should be updated depending on the value that is selected looks like this:

data_plot: [{
         x: [],
         y: []}]

So for example when I select "A1" on the selector data_plot is updated accordingly:

data_plot: [{
x:[3,2,3,4,1,2],
y:[1] }]

So the question is: is there any way to use this and change two different values at the same time using v-model?

Upvotes: 1

Views: 5094

Answers (2)

muka.gergely
muka.gergely

Reputation: 8329

In this case a watcher is useful.

Let me show:

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    selected: '',
    mapSelector: [{
        text: "A1",
        valueA: [3, 2, 3, 4, 1, 2],
        valueB: [1]
      },
      {
        text: "B2",
        valueA: [1, 10, 15, 4, 3, 1],
        valueB: [2]
      }
    ],
    data_plot: [{
      x: [],
      y: []
    }]
  },
  watch: {
    selected(newVal) {
      this.data_plot[0].x = newVal.valueA
      this.data_plot[0].y = newVal.valueB
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-select :items="mapSelector" v-model="selected" return-object>
          </v-select>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          data_plot[0].x: {{ data_plot[0].x }}<br /> data_plot[0].y: {{ data_plot[0].y }}<br />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

The watcher reacts to changes in the selected data property, and sets the other data.

The only trick is that Vuetify's v-select requires the return-object prop.

Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.

...

v-model internally uses different properties and emits different events for different input elements:

  • text and textarea elements use value property and input event;
  • checkboxes and radiobuttons use checked property and change event;
  • select fields use value as a prop and change as an event.

Source: https://v2.vuejs.org/v2/guide/forms.html

That's why you cannot have two v-models on an element: it's nothing else than an oninput and a value prop on input fields/selects/etc.

Upvotes: 2

solomyhansolo
solomyhansolo

Reputation: 107

https://v2.vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

i think u should have a look at computed property or watcher.

If u can make the question much more clearer would be more helpful

v-model1="data[0].x"
v-model2-"data[0].y"

This is wrong,and inside component data do you have an array data ?


        <div class="value">
          <select class="form-control" :required="true" v-model="value">
            <option
              v-for="option in mapSelector"
              v-bind:value="option.text"
              :key="option.id"
              :selected="option.text == value"
              >{{ option.text }}</option
            >
          </select>
        </div>

new Vue({
  el: "#app",
  data: {
    value: '',
    variable:[] // which u need to change
  },
  watch: {
    value(newVal) {
      if(this.value == 'A1')
       this.variable.push(10) // u can do ur stuff here
      if(this.value == 'B1')
       this.variable.push(10111) // u can do ur stuff here
    }
  }
})

Upvotes: 0

Related Questions