# Добавление поля в объект
Если мы создадим объект в секции 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!"
}