New: Functionality for adding vocabulary terms to application profiles

coscine/issues#1558

src/components/Vocabularies/ListVocs.vue

 <template>
   <ul>
-    <li
-      v-for="vocabularyTerm in vocabularyTerms"
-      :key="vocabularyTerm.property"
-    >
-      {{ vocabularyTerm.property }}
+    <li v-for="vocabularyTerm in vocabularyTerms" :key="vocabularyTerm.uri">
+      {{ vocabularyTerm.prefix !== null ? vocabularyTerm.prefix + ":" : ""
+      }}{{ vocabularyTerm.property }}
+      <b-button @click="addVocabularyTerm(vocabularyTerm)">Add</b-button>
     </li>
   </ul>
 </template>
@@ -22,6 +21,11 @@ export default Vue.extend({
       type: Array as PropType<VocabularyTerm[]>,
     },
   },
+  methods: {
+    addVocabularyTerm(vocabularyTerm: VocabularyTerm) {
+      this.$emit("addVocabularyTerm", vocabularyTerm);
+    },
+  },
 });
 </script>