<template>
    <div class="q-pa-xs text-center">
        <q-btn-toggle @click="" v-model="model" toggle-color="primary" :options="[
            { label: llabel, value: lvalue },
        ]" />
    </div>
</template>
  
<script lang="ts">
import { defineComponent, ref, watch, computed, defineProps, withDefaults, } from "vue";
import { useStore } from "src/store";

export default defineComponent({
    name: "ComponentProjectorItem",
    props: {
        llabel: {
            type: String,
            default: 'Projector'
        },
        lvalue: {
            type: String,
            default: 'Projector'
        }
    },
    setup(props) {
        
        let $store = useStore();
        const model = computed({
            get() {
                return $store.state.selected_projector;
            },
            set(newValue) {
                $store.commit('setSelectedProjector',newValue);
            }
        })
        return {
            model,
            ...props
        }
    }
})
</script>
  