<template>
  <div id="choicebox">
    <h2>Nous avons trouvés plusieurs résultats pour vous</h2>
    <div class="adisplay">

<a v-for="value in myList" :key="value" :href="value.url">{{ value.btn }} </a>

    </div>
</div>
</template>
<script>

export default {
 el: '#app',
  data: function() {

    return {
buttons_array: '',
links_array: '',
myList: [],
};
  },
  created: function(){
    this.list()
  },

props: {
buttons:String,
links:String,
},

methods:{
list: function () {
  this.buttons_array = this.buttons.split(",");
  this.links_array = this.links.split(",");
  for (let i = 0; i < this.buttons_array.length; i++){
    this.myList.push({
      btn: this.buttons_array[i],
      url: this.links_array[i]
    })
  }


    }
}

}
</script>
<style>
#choicebox{
  display:flex;
  flex-direction: column;
}
a{
  flex-grow: 0;
  max-width:150px;
  text-align: center;
  margin-bottom:5Px;
}
.adisplay{
  display:grid;
  grid-template-columns: repeat(3, 20%);
}
h2::before{
  content:\f21b;
}
</style>
