Question

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

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>

Answer 1

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

this.test = this.items[0];

这样做..

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

See the modified pen

Answer 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

更改输入的模型值将更改vuetify

2 个答案: