Metadata values can be edited once added

src/components/fieldComponents/keyvalList.vue

@@ -13,7 +13,9 @@
     </form>
 
     <div v-for="(val, key) in value" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
-      <div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ val }}</div>
+      <div class="uk-margin-remove-top uk-padding-remove uk-width-expand">
+        <labelInput :label="key" :value="value[key]" @input="value[key]=$event"/> 
+      </div>
       <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
     </div>
   
@@ -21,9 +23,15 @@
 </template>
 
 <script>
+import labelInput from "../fieldComponents/labelInput"
+
 export default {
   name: 'keyvalList',
 
+  components: {
+    labelInput
+  },
+
   data: function () {
     return {
       newMetadata: {
@@ -64,6 +72,11 @@ export default {
       this.$emit('input', newSelected)
     },
 
+    modifyValue: function (e, v) {
+      console.log(e)
+      console.log(v)
+    }
+
   }
 }
 </script>

src/components/fieldComponents/labelInput.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <label class="uk-form-label uk-text-bold">{{label}}</label>
+
+    <div @click="setEditing(true)" uk-tooltip="title: Click to edit value; delay: 250">
+
+      <div v-show="editing == false">
+        <label> {{value}} </label>
+      </div>
+
+      <input
+        v-show="editing == true"
+        class="uk-input uk-form-small"
+        type="text"
+        v-bind:name="name"
+        v-bind:value="value"
+        ref="textinput"
+        v-on:blur= "setEditing(false)"
+        @keyup.enter = "setEditing(false)"
+        @input="$emit('input', $event.target.value)"
+        autofocus
+      >
+    </div>
+
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'labelInput',
+
+  data: function () {
+    return {
+      editing: false
+    }
+  },
+
+  props: [
+    'name',
+    'label',
+    'value'
+  ],
+
+  methods: {
+    setEditing(editing) {
+      this.editing = editing
+      if (editing == true) {
+        this.$nextTick(() => this.$refs.textinput.focus())
+      }
+    }
+  },
+
+}
+</script>
+
+<style scoped></style>