Skip to content

Instantly share code, notes, and snippets.

@ingodahn
Last active Jul 11, 2022
Embed
What would you like to do?
Updating prop from collection
<template>
<div class="container">
<Component2 :listItems="listItemsV1"/>
</div>
</template>
<script>
import Component2 from './Component2.vue'
import MyCollection from '...'
export default {
data () {
return {}
},
components: {Component2},
methods: {
listItemsV1 () {
//return [{title: "Title 1", opened: "Close"}, {title: "Title 2", opened: "Close"}]
return this.booksOpening();
},
booksOpening () {
let bb=this.books, bo=[];
bb,forEach((b) => {let bc =.. ...; bo.push(bc)}) // adding opend property
return bo;
},
},
Meteor: {
books () {
return MyCollection.find({}).fetch();
}
}
}
</script>
<template>
<div class="container">
<ul>
<li v-for="(item,index) in MyListItems" v-bind:key="index">
{{ item.title }}
<button @click="toggleButton(index)"> {{ MyListItems[index].opened }} </button>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {MyListItems: this.listItems}
},
props: { listItems: { type: Array, } },
methods: {
toggleButton (i) {
let bi=this.MyListItems[i];
if (bi.opened == "Open") bi.opened = 'Close'
else bi.opened = 'Open'
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment