there is a data() object in my Maincomponent.vue. In that data() there is an array called myDatabase and it has several objects. to access the fields in myDatabase using methods
to toggle the isPreview to false and true on click

data() {
return {

myDatabase: [
{
id: 1,
name: “Blue”,
fabric: require(“../static/images/blue.jpeg”),
previewImage: require(“../static/images/blue-shirt.jpeg”),
isPreview: true
},
{
id: 2,
name: “Black”,
fabric: require(“../static/images/black.jpeg”),
previewImage: require(“../static/images/black-shirt.jpeg”),
isPreview: false
}

]
}
},

methods: {
showPreview: function() {
return this.myDatabase.isPreview == false ? true : false
}
}

Solution :

Here is the documentation about methods :

Example :

<template>
<p>{ myDatabase[0].isPreview }</p>
<button @click=”reversePreview(1)”>Reverse preview</button>
</template>

<script>
export default {
data () {
return {
myDatabase: [{
id: 1,
name: “Blue”,
fabric: require(“../static/images/blue.jpeg”),
previewImage: require(“../static/images/blue-shirt.jpeg”),
isPreview: true
},
{
id: 2,
name: “Black”,
fabric: require(“../static/images/black.jpeg”),
previewImage: require(“../static/images/black-shirt.jpeg”),
isPreview: false
}]
}
},
methods: {
reversePreview (id) {
const index = this.myDatabase.findIndex(db => db.id === id)
this.myDatabase[index].isPreview = !this.myDatabase[index].isPreview
}
}
}
</script>