# Добавление поля в объект

Если мы создадим объект в секции data и попытаемся добавить новое поле к объекту, то это не сработает. В таком случае фреймворк предлагает использовать особую конструкцию docs (opens new window)

Vue.set(<object_link>, '<prop_name>', <prop_value>)

Она также хорошо работает и в классе. В дальнейшем после добавления поля можно изменять значение как обычно.

this.someObject.someAddedProp = 'new value';

Для удаления поля я не нашла способа без изменения ссылки во Vue, соответственно и в классе придется пользоваться перезаписыванием.

# Класс









 






import Vue from 'vue';

class ObjectWithNewField {
  testObject = {
    oldField: 'I was here from the beginning!'
  }

  addNewField() {
    Vue.set(this.testObject, 'newField', 'I was added recently!');
  }
}

const instance = new ObjectWithNewField();

export default instance;

# Компонент

Из компонента можно использовать конструкцию this.$set























 





<template>
  <div class="component-block">
    <span class="name">NewFieldObjectOne</span>

    <div><b>testObject:</b> {{ testObject }}</div>
    <button @click="addNewField">Добавить поле</button><br />
    <button @click="addField">Добавить поле из компонента</button>
  </div>
</template>

<script>
import ObjectWithNewField from '@example-services/ObjectWithNewField';

export default {
  data() {
    return {
      testObject: ObjectWithNewField.testObject,
      addNewField: ObjectWithNewField.addNewField.bind(ObjectWithNewField),
    };
  },
  methods: {
    addField() {
      this.$set(this.testObject, 'fieldFromComponent', 'I was added from component!');
    }
  }
};
</script>

# Результат

NewFieldObjectOne
testObject: { "oldField": "I was here from the beginning!" }

NewFieldObjectTwo
testObject: { "oldField": "I was here from the beginning!" }
Обновлено: 12/12/2022, 3:53:53 PM