forked from llaq/infojune.old
83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
|
<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>
|