<template>
  <div>
    <h1>Home</h1>
    <v-container>
      <v-row no-gutters>
        <v-col
          v-for="article in articles"
          :key="article._id"
          cols="12"
          sm="4"
          class="px-5 py-5"
        >
          <v-card class="pa-2 text-center" outlined tile>
            <a>{{ article.titre_article }}</a>
            <p>Quantité : {{article.quantity}}</p>
            <p>{{article.price}} €</p>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { mapState } from "vuex";

export default Vue.extend({
  name: "Home",
  computed: {
    ...mapState(["articles"]),
  },
});
</script>