static/src/components/StringArray.vue

<template>
  <dl class="grid md:pt-1 md:pb-1" v-for="item in props.stringArray" v-bind:key="item">
    <div class="flex flex-col bg-blue-100 text-center m-1">
      <button
        class="text-xs font-thin"
        @click="emitPrompt(item)"
      >
        {{ item }}
      </button>
    </div>
  </dl>
</template>

<script setup lang="ts">
const props = defineProps<{
  stringArray: Array<string>,
  stringPrefix: string
}>()
console.log(props)
const emit = defineEmits(['set-prompt'])

const concatStringIf = (a: string, b: string, separator: string) => {
  return a ? a.concat(separator, b) : b
}

const emitPrompt = (s: string) => {
  const updatedString = concatStringIf(props.stringPrefix, s, ' ')
  emit("set-prompt", updatedString)
}
</script>