是否可以在 Vue 的选择表单中使用 v-model 更改两个值？

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-model 同时更改两个不同的值？

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>

观察者对selected数据属性的变化做出反应，并设置其他数据。

唯一的技巧是 Vuetify 的 v-select 需要 return-object 属性。

虽然有点神奇，v-model 本质上是语法糖 更新用户输入事件的数据，以及对某些边缘的特别关注 案例。

...

v-model 内部使用不同的属性并发出不同的 不同输入元素的事件：

• text 和 textarea 元素使用 value 属性和输入事件；
• 复选框和单选按钮使用选中的属性和更改事件；
• 选择字段将值用作道具并将更改用作事件。

来源：https://vuejs.org/v2/guide/forms.html

这就是为什么一个元素上不能有两个v-models：它只不过是输入字段/选择/等上的oninput 和value 属性。

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