Question

解释起来有点复杂。我需要使用动态html代码创建一个具有属性的对象。让我用一个例子解释一下。

我有一个像我这样的数据的对象

var myObject = {Field1: 'Value1', Field2: 'Value2'};

我有一个包含我的对象属性的数组：

var myArray = ['Field1', 'Field2'];

我使用数组在for循环中生成<input>，如下所示：

<div v-for="property in myArray">
    <input type="text" :value="myObject[property]" />
</div>

现在，我需要从生成的输入中获取值（可以是对象或数组）。

我知道我可以简单地接受myObject，但问题是值可能会改变（用户可以改变数据，因为输入是正确的方法）。此外，我不想将输入绑定到myObject，因为即使输入值发生更改，myObject也需要保持初始状态。

问题是如何创建新对象并将输入绑定到新对象？

Answer 1

您可以从原始对象创建对象：

data: {
  objectValues = Object.assign({}, myObject)
}

然后您可以在模板中使用该对象：

<div v-for="property in myArray">
    <input type="text" v-model="objectValues[property]" />
</div>

Answer 2

解决方案：

v-model one计算如下，它有一个缺点，Vue不会抓住修改来重新渲染。
创建一个克隆myOjbect，然后观看它，如果更改，请执行您喜欢的操作。
与解决方案2类似：使用v-bind，然后绑定输入事件以将值分配给另一个对象或其他对象。 PS： v-model做同样的事情。

＆＃13;

app = new Vue({ //not vue, it is Vue
el: "#app",
  data() {
    return {
      myObject: {Field1: 'Value1', Field2: 'Value2'},
      myArray: ['Field1', 'Field2'],
      copyMyObject: {}, //solution 2
      copyMyObject1: {} //solution 3
    }
  },
  computed: {//solution 1
    computedObject: function(){
      return Object.assign({}, this.myObject)
    }
  },
  mounted: function(){ //solution 2
    this.copyMyObject= Object.assign({}, this.myObject)
    this.copyMyObject1= Object.assign({}, this.myObject)
  },
  watch: {//solution 2
    copyMyObject: function (newValue, oldValue){
      console.log('copyMyObject', newValue)
      //do something else you'd like
    }
  },
  methods: {
    getObject: function () {//solution 1
      console.log('computedObject', this.computedObject)
      console.log('myObject', this.myObject)
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <button @click="getObject()">Click me!</button>
  <p>The disadvantage: {{computedObject}}</p>
  <div v-for="property in myArray">
      <input type="text" v-model="computedObject[property]" />
  </div>
  <p>Org: {{myObject}}</p>
  <p>Copy: {{copyMyObject}}</p>
  <div v-for="property in myArray">
      <input type="text" v-model="copyMyObject[property]" />
  </div>
  <p>Copy: {{copyMyObject1}}</p>
  <div v-for="property in myArray">
      <input type="text" v-bind:value="copyMyObject1[property]" @input="copyMyObject1[property] = $event.target.value" />
  </div>
</div>

＆＃13;

动态创建模型

2 个答案: