是否可以在 Vue 中选择形式中使用 v 模型更改两个值?

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>

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

唯一的诀窍是Vuetify的v-select需要return-object道具。

虽然有点神奇，但 v 模型本质上是语法糖 更新用户输入事件的数据，并特别注意某些边缘 例。

。

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

文本和

• 文本区域元素使用值属性和输入事件;
• 复选框和单选按钮使用选中的属性和更改事件;
• 选择字段使用值作为道具和更改作为事件。

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

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

Answer 2

https://v2.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
}
}
})