golfForm.vue

<template>
  <section class="section card">
    <div class="columns">
      <div class="column is-12">
        <h1 class="title is-1">{{ club.name }}</h1>
        <hr>
      </div>
    </div>

    <!-- GENERAL -->
    <div class="columns">
      <div class="column is-one-third">
        <h6 class="subtitle is-4">Général</h6>
      </div>
      <div class="column is-two-thirds">
        <div class="columns is-multiline">
          <!-- Nom du club -->
          <div class="column is-12">
            <div class="field">
              <label class="label">Nom du club</label>
              <div class="control">
                <input class="input" type="text" placeholder="Golf Club" v-model="club.name">
              </div>
            </div>
          </div>
          <!-- Référance client -->
          <div class="column is-12">
            <div class="field">
              <label class="label">Référence Client</label>
              <div class="control">
                <input class="input" type="text" placeholder="Golf Club" v-model="club._id" disabled>
              </div>
            </div>
          </div>
          <!-- Téléphone -->
          <div class="column is-6">
            <div class="field">
              <label class="label">Téléphone</label>
              <div class="control">
                <input class="input" type="text" placeholder="Golf Club" v-model="club.address.club.phone">
              </div>
            </div>
          </div>
          <!-- Email Account -->
          <div class="column is-6">
            <div class="field">
              <label class="label">Email du compte</label>
              <div class="control">
                <input class="input" type="text" placeholder="Golf Club" v-model="club.address.club.email" disabled>
              </div>
            </div>
          </div>
        </div> <!-- is-multiline form  -->
      </div>
    </div>

    <hr>

    <!-- Button Validation -->
    <div class="columns">
      <div class="column is-offset-8 is-4">
        <div class="field is-grouped">
          <p class="control">
            <button class="button is-light">
              Annuler
            </button>
          </p>
          <p class="control">
            <button class="button is-info" :class="{ 'is-loading': loading }" @click="test">
              Modifer
            </button>
          </p>
        </div>
      </div>
    </div>
  </div>

  </section>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      club: this.$store.state.club
    }
  },
  watch: {
    clubFromStore: function (club) {
      this.club.name = club.name
    }
  },
  computed: {
    ...mapGetters({
      clubFromStore: 'getClub',
      loading: 'isLoading'
    })
  },
  methods: {
    test () {
      console.log(this.clubFromStore)
    }
  }
}
</script>

<style scoped lang="scss">
.form-section {
  margin-bottom: -2rem;
}
.input {
  background-color: #F5F5F5;
}
</style>