在 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>
我的 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>