1
0
Fork 0
infojune/src/components/ChoiceBox.vue

83 lines
1.6 KiB
Vue
Raw Normal View History

<template>
<div class="app">
<h2>Nous avons trouvés plusieurs résultats pour vous</h2>
<!--
<p>
RÉSULTATS DE DÉBUG<br>
String : {{buttons}} <br>
Array : {{buttons_array}}<br>
String : {{links}}<br>
Array : {{links_array}}<br>
</p>-->
<button v-for="item in buttons_array" :key="item" class="button-redirect">{{ item }}</button>
<li v-for="f in fruit" :key="f">
{{ f.buttonsMessage }}
{{ f.linksMessage }}
</li>
<!--
<ul id="example-1" >
<button class="button-redirect">Gchange</button>
<li v-for="item in buttons_array" :key="item">
<button class="button-redirect">{{ item }}</button>
</li>
<li v-for="item in links_array" :key="item">
{{ item }}
</li>
</ul>
-->
</div>
</template>
<script>
export default {
el: '#app',
data: function() {
return {
buttons_array: '',
links_array: '',
};
},
created: function(){
this.split_buttons(),
this.split_links()
},
computed: {
list() {
const list = []
for (let i = 0, len = Math.max(this.buttons_array.length, this.links_array.length); i < len; i++) {
list.push({
buttonsMessage: this.buttons[i] && this.buttons[i].message || 'no buttons message',
linksMessage: this.links[i] && this.links[i].message || 'no links message'
})
}
return list
}
},
props: {
buttons:String,
links:String,
},
methods:{
split_buttons: function () {
this.buttons_array = this.buttons.split(",");
},
split_links: function () {
this.links_array = this.links.split(",");
}
}
}
</script>
<style>
li{
list-style-type: none;
}
</style>