这个解释起来有点复杂。我需要创建一个具有动态 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)到该新对象?
最佳答案
解决方案:
v-model 一个计算如下,它有一个缺点,Vue 不会捕获修改以重新渲染。
创建一个克隆
myOjbect
然后观察它,如果有变化,做你喜欢的事情。类似于解决方案 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>
关于javascript - 动态创建模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50067690/