osm_my_commerce/components/TagTable.vue

<template>
  <div>
    <h2 class="title is-2">Tags de data.elements[0]</h2>
    <section v-if="data && data.elements" class="edit">
      elements: {{ data.elements.length }}
      <b-field label="Nom">
        <b-input
          v-model="data.elements[0].tags.name"
          icon="pencil"
          placeholder="le nom de votre commerce"
        ></b-input>
      </b-field>
      <b-field label="Site web">
        <b-input
          v-model="data.elements[0].tags.website"
          icon="planet"
          placeholder="www.monsite.com"
        ></b-input>
      </b-field>
      <b-field label="email officiel">
        <b-input
          v-model="data.elements[0].tags.mail"
          icon="enveloppe"
          placeholder="contact@monsite.com"
        ></b-input>
      </b-field>
      <b-field label="Tel">
        <b-input
          v-model="data.elements[0].tags.phone"
          icon="planet"
          placeholder="012345"
          type="tel"
        ></b-input>
      </b-field>
      <b-field label="Description de votre activité">
        <b-input
          v-model="data.elements[0].tags.description"
          icon="planet"
          placeholder="description de votre activité"
          type="tel"
        ></b-input>
      </b-field>
      <b-field>
        <b-switch v-model="data.elements[0].tags.takeaway">
          Vente à emporter
        </b-switch>
        <b-switch v-model="data.elements[0].tags['parking:velo']">
          Parking vélo
        </b-switch>
        <b-switch v-model="data.elements[0].tags['webaccess']">
          Accès Internet
        </b-switch>
        <b-switch v-model="data.elements[0].tags['elecborne']">
          borne de recharge électrique sur parking
        </b-switch>
        <b-switch v-model="data.elements[0].tags['access:public']">
          Accès autorisé au public
        </b-switch>
      </b-field>

      <h2 class="title is-2">Horaires d'ouverture</h2>
      <div class="padded">
        {{ data.elements[0].tags.opening_hours }}
      </div>

      <button class="btn button has-background-success">Enregistrer</button>
    </section>
    <section class="comparaison">
      <h2>Comparaison des tags</h2>
      <table>
        <thead>
          <tr>
            <td>API OSM</td>
            <td>API addok</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <!--                <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
              <!--                  <div class="columns">-->
              <!--                    <div class="column">-->
              <!--                      <strong> {{ name }} </strong>-->
              <!--                    </div>-->
              <!--                    <div class="column">-->
              <!--                      {{ value }}-->
              <!--                    </div>-->
              <!--                  </div>-->
              <!--                </div>-->
            </td>
            <td v-if="fetchedData.osm_data && fetchedData.osm_data.elements">
              <div
                v-for="(value, name) in fetchedData.osm_data.elements[0].tags"
                :key="name"
              >
                <div class="columns">
                  <div class="column">
                    <strong> {{ name }}</strong>
                  </div>
                  <div class="column">{{ value }}</div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <pre v-if="data">
      data:
      {{ data }}
    </pre>
  </div>
</template>