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 | 2x 2x | <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>
|