diff --git a/frontend/src/views/domain/ngx_conf/directive/DirectiveAdd.vue b/frontend/src/views/domain/ngx_conf/directive/DirectiveAdd.vue
index 99beda51..b61b1ace 100644
--- a/frontend/src/views/domain/ngx_conf/directive/DirectiveAdd.vue
+++ b/frontend/src/views/domain/ngx_conf/directive/DirectiveAdd.vue
@@ -9,7 +9,7 @@ const {$gettext} = useGettext()
 
 const emit = defineEmits(['save'])
 
-const {ngx_directives, idx} = defineProps(['ngx_directives', 'idx'])
+const props = defineProps(['ngx_directives', 'idx'])
 
 const directive = reactive({directive: '', params: ''})
 const adding = ref(false)
@@ -28,13 +28,13 @@ function save() {
         directive.directive = If
     }
 
-    if (idx) {
-        ngx_directives.splice(idx + 1, 0, {directive: directive.directive, params: directive.params})
+    if (props.idx) {
+        props.ngx_directives.splice(props.idx + 1, 0, {directive: directive.directive, params: directive.params})
     } else {
-        ngx_directives.push({directive: directive.directive, params: directive.params})
+        props.ngx_directives.push({directive: directive.directive, params: directive.params})
     }
 
-    emit('save', idx)
+    emit('save', props.idx)
 }
 </script>
 
diff --git a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
index 86ee7d2d..2e5660c3 100644
--- a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
+++ b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
@@ -8,7 +8,7 @@ import {DeleteOutlined} from '@ant-design/icons-vue'
 
 const {$gettext} = useGettext()
 
-const {ngx_directives} = defineProps<{
+const props = defineProps<{
     ngx_directives: any[]
 }>()
 
@@ -25,11 +25,11 @@ function add() {
 
 function save() {
     adding.value = false
-    ngx_directives.push(directive)
+    props.ngx_directives.push(directive)
 }
 
 function remove(index: number) {
-    ngx_directives.splice(index, 1)
+    props.ngx_directives.splice(index, 1)
 }
 
 function onSave(idx: number) {
@@ -42,7 +42,7 @@ function onSave(idx: number) {
 <template>
     <h2>{{ $gettext('Directives') }}</h2>
 
-    <a-form-item v-for="(directive,index) in ngx_directives" @click="current_idx=index">
+    <a-form-item v-for="(directive,index) in props.ngx_directives" @click="current_idx=index">
 
         <div class="input-wrapper">
             <code-editor v-if="directive.directive === If" v-model:content="directive.params"
@@ -71,13 +71,13 @@ function onSave(idx: number) {
                             <a-textarea v-model:value="directive.comments"/>
                         </a-form-item>
                     </a-form>
-                    <directive-add :ngx_directives="ngx_directives" :idx="index" @save="onSave(index)"/>
+                    <directive-add :ngx_directives="props.ngx_directives" :idx="index" @save="onSave(index)"/>
                 </div>
             </div>
         </transition>
     </a-form-item>
 
-    <directive-add :ngx_directives="ngx_directives"/>
+    <directive-add :ngx_directives="props.ngx_directives"/>
 </template>
 
 <style lang="less" scoped>