Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 1x 1x | <template> <div class="mt-4"> <div v-if="!showButtons"> <p><strong>Capability: {{ choosenCapability.capability }}</strong></p> <div class="row mt-2"> <div class="col-md-12"> <button class="btn btn-secondary" @click="showButtons = true; handleCapabilityClick(null)" > Back </button> </div> </div> </div> <div v-else> <p><strong>Capabilites</strong></p> <div class="row"> <div class="col-md-12"> <button v-for="capability in configCapability" :key="capability.id" class="btn btn-outline-primary mr-2 mb-2" @click="showButtons = false; handleCapabilityClick(capability)" > {{ capability.capability }} </button> </div> </div> </div> </div> </template> <script setup> import { onMounted, ref, watch, defineEmits } from 'vue' import { useStore } from 'vuex' const store = useStore() const configCapability = ref([]) const showButtons = ref(true) const choosenCapability = ref(null) const emit = defineEmits(['capabilityClicked']) onMounted(() => { configCapability.value = store.state.configlist }); watch(() => store.state.configlist, async () => { configCapability.value = store.state.configlist }, { deep: true } ); watch(() => choosenCapability.value, async () => { if (choosenCapability.value == null) { emit('capabilityClicked', null) }else { emit('capabilityClicked', choosenCapability.value) } }, { deep: true } ); const handleCapabilityClick = (capability) => { choosenCapability.value = capability; } </script> |