ayanova/src/components/pick-list.vue

@@ -19,6 +19,11 @@
       clearable
       :no-filter="isTagFilter"
     >
+      <template v-slot:prepend-item v-if="hasError()">
+        <div class="pl-2">
+          <span class="error--text"> {{ errors[0] }}</span>
+        </div>
+      </template>
       <!-- <template v-slot:no-data>  hide-selected  v-on:input="$emit('input', $event)" cache-items="false":no-data-text="lt('NoData')"
         <v-list-item>
           <v-list-item-title>
@@ -41,10 +46,7 @@
 //it would not recognize window in the function call
 import _ from "../libs/lodash.min.js";
 /*
-todo: double check what I want here is actually autocomplete, 
-    becuase I'm not actually autocompleting what is typed, it's more auto-search
-    maybe combobox does this better?
-    worth it to check
+
 todo: validation error is obscured by no-data element
     - PREPEND SLOT - use the prepend slot to add custom error message box or mirror it, In addition to the help link mentioned below or maybe this is it?
         - style it to look like the error slot
@@ -160,6 +162,9 @@ export default {
     lt: function(ltkey) {
       return window.$gz.translation.get(ltkey);
     },
+    hasError: function() {
+      return this.errors.length > 0;
+    },
     customFilter(item, queryText, itemText) {
       //NOTE: I wanted this to work with tags but all it does is highlight all of each row if tag query is present
       //I guess because it later on attempts to do the highlighting and can't find all the entered query