Resumen de datos

Los estilos del Index.vue del Resume:

<style scoped>
main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
h1,
p {
  margin: 0;
  text-align: center;
}
h1 {
  margin-top: 14px;
  color: var(--brand-green);
}
.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 48px 24px;
  box-sizing: border-box;
}
</style>

Mi solución:

<script>
export default {
  props: {
    label: {
      type: String,
    },
    amount: {
      type: Number,
      default: null,
    },
    totalAmount: {
      type: Number,
    },
    date: {
      type: String,
    },
  },
  computed: {
    amountVisual() {
      return this.amount !== null ? this.amount : this.totalAmount;
    },
    labelVisual() {
      if (this.amount == null) {
        return this.label;
      }
      return this.date;
    },
  },
};
</script>

Este es mi proyecto

      {{ label }}    \

      {{ amountVisual }}    \

{{ labelVisual }}\

{{ amountVisual }}\

{{ labelVisual }}

{{ amountVisual }}

Mi solucion:

labelVisual() {
      return this.amount !== null ? "2023-02-22" : this.label;
    },

En el amount en Home, le coloque como parametro :amount=“null” y me funciono perfectamente, lo que me gustaria saber si es correcto que lo haga asi, o si por lo contrario deberia hacerle una variable y returnar el valor de null? Saludos!

Esto hice para una fecha:

Index.vue:

<template>
  <main>
    <p>{{ selectedDate }}</p>
    <h1>{{ amountVisual }}</h1>
  </main>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true,
    },
    dateLabel: {
      type: String,
      default: null,
    },
    totalAmount: {
      type: Number,
      required: true,
    },
    amount: {
      type: Number,
      default: null,
    },
  },

  computed: {
    amountVisual() {
      return this.amount !== null ? this.amount : this.totalAmount;
    },

    selectedDate() {
      return this.dateLabel !== null ? this.dateLabel : this.label;
    },
  },
};
</script>

<style scoped>
main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
h1,
p {
  margin: 0;
  text-align: center;
}
h1 {
  margin-top: 14px;
  color: var(--brand-green);
}
.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 48px 24px;
  box-sizing: border-box;
}
</style>

Home.vue:

<template>
  <Layout>
    <template #header>
      <Header></Header>
    </template>
    <template #resume>
      <Resume
        :label="'Ahorro total'"
        :totalAmount="50000"
        :amount="amount"
        :dateLabel="dateLabel"
      />
    </template>
    <template #movements>
      <Movements />
    </template>
  </Layout>
</template>

<script>
import Header from "./Header.vue";
import Layout from "./Layout.vue";
import Movements from "./Movements.vue";
import Resume from "./Resume/Index.vue";

export default {
  components: {
    Header,
    Layout,
    Movements,
    Resume,
  },

  data() {
    return {
      amount: null,
      dateLabel: "22/10/2022",
    };
  },
};
</script>

Index.vue

//se agrega función computada y se utiliza dicha función en el template
        labelVisual(){
            const timestamp = (new Date).toLocaleString('en-US');
            const label = 'Ahorro total';
            
            return this.label !== null ? 
            label :
            `${label}: ${timestamp}`;
        }, 

//En la función data, se agrega la variable 'label' y se envía como parametro de 'label' en el template `Resume`
  data(){
    return {
      amount: null,
      label: null,
    }

Mi solución al reto:

Home.vue

<template>
  <Layout>
    <template #header>
      <Header />
    </template>
    <template #resume>
      <Resume
        :label="'Ahorro total'"
        :date="date"
        :amount="amount"
        :total-amount="200000"
      />
    </template>
    <template #movements>
      <Movements />
    </template>
  </Layout>
</template>

<script>
import Layout from "./Layout.vue";
import Header from "./Header.vue";
import Resume from "./Resume/Index.vue";
import Movements from "./Movements.vue";

export default {
  components: {
    Layout,
    Header,
    Resume,
    Movements,
  },

  data() {
    return {
      amount: 100,
      date: "26 de noviembre del 2022",
    };
  },
};
</script>

<style></style>

Index.vue

<template>
  <main>
    <p v-text="labelShow"></p>
    <h1 v-text="amountShow"></h1>
  </main>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
    },
    date: {
      type: String,
      default: null,
    },
    amount: {
      type: Number,
      default: null,
    },
    totalAmount: {
      type: Number,
    },
  },
  computed: {
    amountShow() {
      return this.amount !== null ? this.amount : this.totalAmount;
    },
    labelShow() {
      return this.date == null ? this.label : this.date;
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vh;
}

h1,
p {
  margin: 0;
  text-align: center;
}

h1 {
  margin-top: 14px;
  color: var(--brand-green);
}
</style>

Así me quedo la parte del reto:

Home.vue:

<template>
  <Layout>
    <template #header>
      <Header />
    </template>
    <template #resume>
      <Resume
        :label="label"
        :date="'06 de Abril 2022'"
        :total-amount="100000"
        :amount="amount"
      />
    </template>
    <template #movements>
      <Movements />
    </template>
  </Layout>
</template>

<script>
import Layout from "./Layout.vue";
import Header from "./Header.vue";
import Resume from "./Resume/Index.vue";
import Movements from "./Movements.vue";

export default {
  components: {
    Layout,
    Header,
    Resume,
    Movements,
  },
  data() {
    return {
      amount: null,
      label: null,
    };
  },
};
</script>

Index.vue:

<template>
  <main>
    <p>{{ labelVisual }}</p>
    <h1>{{ amountVisual }}</h1>
  </main>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: null,
    },
    date: {
      type: String,
    },
    totalAmount: {
      type: Number,
    },
    amount: {
      type: Number,
      default: null,
    },
  },
  computed: {
    amountVisual() {
      return this.amount !== null ? this.amount : this.totalAmount;
    },
    labelVisual() {
      return this.label !== null ? this.label : this.date;
    },
  },
};
</script>

<style scoped>
main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
h1,
p {
  margin: 0;
  text-align: center;
}
h1 {
  margin-top: 14px;
  color: var(--brand-green);
}
.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 48px 24px;
  box-sizing: border-box;
}
</style>

Va, realicé el reto de esta forma. Cualquier mejora que me sugieran será bienvenida. 😁

El template Home

<template>
  <Layout>
    <template #header>
      <Header />
    </template>
    <template #resume>
      <Resume
        :label="'Ahorro total'"
        :specific-date="specificDate"
        :total-amount="100000"
        :specific-amount="specificAmount"
      />
    </template>
    <template #movements>
      <Movements />
    </template>
  </Layout>
</template>

<style></style>

<script>
import Layout from "./LayoutItem.vue";
import Header from "./HeaderItem.vue";
import Resume from "./Resume/IndexResume.vue";
import Movements from "./Movements/IndexMovements.vue";

export default {
  components: {
    Layout,
    Header,
    Resume,
    Movements,
  },
  data() {
    return {
      specificAmount: null,
      specificDate: null,
    };
  },
};
</script>

El template Resume

<template>
  <main>
    <p>{{ labelInfo }}</p>
    <h1>{{ amountToShow }}</h1>
  </main>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
    },
    totalAmount: {
      type: Number,
    },
    specificAmount: {
      type: Number,
      default: null,
    },
    specificDate: {
      type: String,
      default: null,
    },
  },
  computed: {
    amountToShow() {
      return this.specificAmount !== null
        ? this.specificAmount
        : this.totalAmount;
    },
    labelInfo() {
      return this.label !== null ? this.label : this.labelInfo;
    },
  },
};
</script>

<style scoped>
main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
h1,
p {
  margin: 0;
  text-align: center;
}
h1 {
  margin-top: 14px;
  color: var(--brand-green);
}
.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 48px 24px;
  box-sizing: border-box;
}
</style>