在 vuejs 中访问数据对象

accesing data objects in vuejs

我的 Maincomponent.vue 中有一个 data() 对象。在那个 data() 中,我有一个名为 myDatabase 的数组,它有几个对象。我想使用方法访问 myDatabase 中的字段 我想在点击时将 isPreview 切换为 false 和 true

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
       }
    }

这是 documentation about methods :

示例:

<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>