更改输入上的模型值正在更改 vuetify 中的选择选项答案

【问题标题】：Changing model value on input is changing the select options in vuetify更改输入上的模型值正在更改 vuetify 中的选择选项
【发布时间】：2018-09-27 04:18:23
【问题描述】：

选择第一个选项Fpo，在选择第一个项目时，我将列表中的第一个对象分配给test变量。我使用 test.name 作为该输入字段的模型。当我尝试修改输入字段时，选择选项也在发生变化。它是如何工作的？在角度我没有看到这个问题。有什么方法可以使输入字段的更改不反映在选择框选项上？

new Vue({
  el: '#app',
  data: () => ({
    items: [{name: 'Fpo', value:'foo'},{name:'bar', value:'bar'}],
    test: {}
  }),
  methods: {
    assingValue: function () {
      this.test = this.items[0]
    }
  }
})

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-xl>
      <v-layout wrap align-center>
        <v-flex xs12 sm6 d-flex>
          <v-select
            :items="items"
            label="Standard"
                    item-text="name"
                    item-value="value"
                    @change="assingValue"
          ></v-select>
        </v-flex>
        <v-flex>
                    <v-text-field v-model="test.name">
            </v-text-field>
          </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

您需要为您的对象创建一个深度克隆（完全独立的克隆）。所以不是这个..

this.test = this.items[0];

这样做..

this.test = JSON.parse(JSON.stringify(this.items[0]));

See the modified pen

【讨论】：

【解决方案2】：

这与 Vue 反应性有关。看看https://vuejs.org/v2/guide/reactivity.html

有时您可能希望将多个属性分配给现有的对象，例如使用 Object.assign() 或 _.extend()。然而，新添加到对象的属性不会触发更改。在这样的情况下，创建一个新对象，其属性来自原始对象对象和mixin对象：
// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

基本上，如果您像使用等号一样设置它们，而不是复制值，它只是开始指向同一个地方，所以如果您更改其中任何一个，它们都会改变..

您可以将代码更改为：

assingValue: function () {
  this.test = Object.assign({name: this.items[0].name})
}

检查这个link of the modified codepen

【讨论】：

它是一个深拷贝，是否可以将整个对象复制到this.test？