<template>
  <div id="choicebox">
    <h2>{{title}}</h2>
    <div class="adisplay">

<a class="button" 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,
title: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;
align-items: center;
justify-content: center;
}
a{
  margin:10px;
}
.adisplay{
  display:grid;
  grid-template-columns: repeat(3, 30%);
}
@media only screen and (max-width: 460px) {
  /* For mobile phones: */
  .adisplay{
    display:grid;
    grid-template-columns: repeat(1, 30%);
  }
}
</style>
