diff --git a/web/src/components/EnvironmentForm.vue b/web/src/components/EnvironmentForm.vue
index e35f9c43d..fb781cc3d 100644
--- a/web/src/components/EnvironmentForm.vue
+++ b/web/src/components/EnvironmentForm.vue
@@ -25,10 +25,10 @@
{ @@ -81,7 +81,7 @@@@ -109,17 +109,17 @@ export default { }, created() { - if (!this.item.env) { - this.item.env = '{}'; - } - if (!this.item.json) { - this.item.json = '{}'; - } }, data() { return { + images: [ + 'dind-runner:latest', + ], advancedOptions: false, + json: '{}', + env: '{}', + cmOptions: { tabSize: 2, mode: 'application/json', @@ -134,12 +134,9 @@ export default { methods: { setExtraVar(name, value) { try { - const obj = JSON.parse(this.item.json); + const obj = JSON.parse(this.json || '{}'); obj[name] = value; - this.item = { - ...this.item, - json: JSON.stringify(obj, null, 2), - }; + this.json = JSON.stringify(obj, null, 2); } catch (err) { EventBus.$emit('i-snackbar', { color: 'error', @@ -148,6 +145,16 @@ export default { } }, + beforeSave() { + this.item.json = this.json; + this.item.env = this.env; + }, + + afterLoadData() { + this.json = this.item?.json || '{}'; + this.env = this.item?.env || '{}'; + }, + getItemsUrl() { return `/api/project/${this.projectId}/environment`; },