forked from llaq/infojune.old
75 lines
1.1 KiB
Vue
Executable File
75 lines
1.1 KiB
Vue
Executable File
<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;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
a{
|
|
margin:15px;
|
|
}
|
|
.adisplay{
|
|
display:grid;
|
|
grid-template-columns: repeat(3, 20%);
|
|
}
|
|
@media only screen and (max-width: 460px) {
|
|
/* For mobile phones: */
|
|
.adisplay{
|
|
display:grid;
|
|
grid-template-columns: repeat(0, 0%);
|
|
}
|
|
}
|
|
|
|
h2::before{
|
|
content:\f21b;
|
|
}
|
|
</style>
|