forked from llaq/infojune.old
66 lines
1.0 KiB
Vue
66 lines
1.0 KiB
Vue
<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" target="_blank">{{ 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>
|