Создание моделей динамически

Question

Создание моделей динамически

1

Это немного сложно объяснить. Мне нужно создать объект со свойствами из динамического 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 но дело в том, что значения могут измениться (пользователь может изменять данные, потому что это вход, который является правильным подходом). Также я не хочу связывать входы с myObject потому что даже при изменении входных значений myObject должен оставаться в качестве исходного состояния.

Вопрос в том, как я могу создать новый объект и связать свои входы с этим новым объектом?

Luis felipe De jesus Munoz 27 апр. 2018, в 20:36

Источник

Теги:

javascript

vue.js

2 ответа

1

Вы создаете объект из исходного объекта:

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

то вы можете использовать этот объект в своем шаблоне:

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

Roy J 27 апр. 2018, в 15:57

Ещё вопросы

Sphinx · Accepted Answer · 2018-04-27T16-19-00.000Z

Решения:

v-model, рассчитанная, как показано ниже, у нее есть один недостаток: Vue не поймает модификацию повторной визуализации.
создайте один клон myOjbect затем посмотрите его, если измените, сделайте то, что вам нравится.
аналогично решению 2: используя v-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/[email protected]/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>