Как уничтожить реквизит в Vuejs шаблоне?

Question

В Vuejs Как деструктурировать реквизит и сделать код чище

Я знаю, что Используя v-for = "({y}) в x" мы можем деструктировать, но в этом случае нет v- для

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

Как деструктурировать и использовать просто {{пол_имя}} вместо {{кандидат.gender.gender.gender_name}}

кандидат - это реквизит, который передается из его родитель

Answer 1

Вы можете использовать вычисляемое свойство. Обратите внимание, что вам может потребоваться выполнить цепочку, если это свойство или какое-либо из его родительских свойств может не существовать

computed: {
  gender() {
    return this.candidate.gender.gender.gender_name;
  }//chaining:
  gender_safe() {
    return this.candidate && this.candidate.gender && this.candidate.gender.gender && this.candidate.gender.gender.gender_name;
  }
}