Можно ли изменить два значения, используя v-модель в форме выбора в Vue?

Question

Я использую форму v-select, где на основе выбранного элемента я хочу изменить два значения одновременно. Теперь я хотел бы сделать это таким образом, но на самом деле это пока невозможно:

<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>

Вот список, который я подключил к форме выбора:

 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 это должно быть обновлено в зависимости от выбранного значения выглядит следующим образом:

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

Так, например, когда я выбираю "A1" на селекторе data_plot обновляется соответственно:

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

Таким образом, вопрос: есть ли способ использовать это и изменить два разных значения одновременно, используя v-модель?

Answer 1

В этом случае наблюдатель полезен.

Позвольте мне показать:

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

Часы 1014 * er реагируют на изменения свойства данных selected и задают другие данные.

Единственная хитрость в том, что Vuetify v-select требует return-object prop.

Хотя это немного волшебно, v-модель по сути является синтаксическим сахаром для обновления данных о пользователе события ввода, а также особая осторожность для некоторых крайних случаев.

...

v-модель внутренне использует разные свойства и генерирует разные события для разных элементов ввода:

• элементы text и textarea используют свойство value и событие ввода;
• флажки и радиокнопки используют свойство selected и событие события;
• в полях выбора значение используется как пропеллер и изменяется как событие.

Источник: https://vuejs.org/v2/guide/forms.html

Вот почему у вас не может быть двух v-models на элементе: это не что иное, как oninput и value реквизит для полей ввода / выбирает / et c.

Answer 2

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

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

Если вы можете сделать вопрос много более понятным будет более полезным

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
    }
  }
})