How to assign a variable as a value inside object?

Question

In Vue.js, I have a data variable roomFilters which has an array and i want to assign that array to key -> items in filter1 object, but my code is not working. I am getting the array in roomFilters state variable but how to use it inside object?

<script>
import { mapState, mapActions } from 'vuex';
import ns from '@/vue/store/namespaces';

export default {
data() {
    return {
        filterData: {
            filter1: {
                key: 'filter1',
                title: 'Space Attributes',
                criteriaType: 'Multivalue',
                items: this.roomFilters,
                itemsToShow: 2
            },
        }
    };
  },
  computed: {
    ...mapState(ns.global, ['roomFilters'])
  },
  created() {
    this.fetchRoomFilters();
  },
  methods: {
    ...mapActions(ns.global, ['fetchRoomFilters']),
    
    }
  }
};
</script>

Answer 1

Since your property is based on other one it should be defined as a computed one :

export default {
data() {
    return {
       
    };
  },
  computed: {
    ...mapState(ns.global, ['roomFilters']),
    filterData(){
         return {
            filter1: {
                key: 'filter1',
                title: 'Space Attributes',
                criteriaType: 'Multivalue',
                items: this.roomFilters,
                itemsToShow: 2
            },
        }
   }
  },
  created() {
    this.fetchRoomFilters();
  },
  methods: {
    ...mapActions(ns.global, ['fetchRoomFilters']),
    
    }
  }
};