Here is a snippet from my Vue file:
import store from '@/store'
export default{
name: 'myList',
data: () => ({
show: true,
listContent: [{
name: '1',
icon: 'person',
value: function () {
return store.state.myStore.settings.one
}
}, {
name: '2',
icon: 'person',
value: function () {
return store.state.myStore.settings.two
}
}, {
name: '3',
icon: 'person',
value: function () {
return store.state.myStore.settings.three
}
}
]
})
}
The issue lies in fetching the 'value' from the 'listContent' array.
{
name: '3',
icon: 'person',
value: function () {
return store.state.myStore.settings.three
}
}
In my implementation, I assumed I could access the view by using :
this.$store.state.myStore.settings.one
However, 'this' inside the value function refers to the object
{
name: '3',
icon: 'person',
value: function () {
return store.state.myStore.settings.three
}
}
Despite this, the code continues to malfunction. I aim to retrieve the store within listContent.
The list, presented in the following manner :
<v-data-table :items="listContent" hide-actions hide-headers>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right" v-text="props.item.value()"> </td>
</template>
</v-data-table>
I may have erred in referencing the store or incorrectly structured the template. Thoughts?