In Vuejs How to destructure props and improve code readability
I understand that with v-for="({y}) in x" we can destructure, but in this particular scenario there is no v-for
<template>
<div>{{candidate.gender.gender.gender_name}}</div>
<div>{{candidate.name.first_name}}</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "Candidate",
props: {
candidate: Object
},
computed: {}
</script>
Is it possible to destructure and use just {{gender_name}} instead of {{candidate.gender.gender.gender_name}}
The prop 'candidate' is passed from its parent component