javascript - 动态创建模型

Question

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

我有一个这样的对象

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

我有一个包含我的对象属性的数组，如下所示:

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

我用数组生成<input>在这样的 for 循环中:

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

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

我知道我可以简单地使用 myObject但问题是这些值可能会改变(用户可以更改数据，因为这是一种正确的输入方式)。我也不想将输入绑定(bind)到 myObject因为即使输入值发生变化，myObject需要保持初始状态。

问题是如何创建一个新对象并将我的输入绑定(bind)到该新对象？

Answer 1

解决方案:

1. v-model 一个计算如下，它有一个缺点，Vue 不会捕获修改以重新渲染。

2. 创建一个克隆 myOjbect 然后观察它，如果有变化，做你喜欢的事情。

3. 类似于解决方案 2:使用 v-bind，然后绑定(bind)输入事件以将值分配给另一个对象或其他对象。PS: v-model 做同样的事情。

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

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