This is a Vue3 project. When Domains.vue is mounted, getDomains is dispatched to vuex, and the data is properly set as indicated by vue dev tools.

For some reason, the data is not displayed in the template for loop. Perhaps one of you wonderful people can help me figure out why not?

Domains.vue

<template>
    <div >
        <h1>This is an domains page</h1>

        <ul>
            <li v-for="item in domains" :key="item.post_name">
                <h3>{{ item.post_title }}</h3>
                <p>{{ item.post_excerpt }}</p>
            </li>
        </ul>

    </div>
</template>

<script>
export default {
    name: 'Domains',
    computed: {
        domains() {
            return this.$store.state.domains.domains
        },
    },
    mounted() {
        this.$store.dispatch('getDomains')
    }
}
</script>

vuex store

import { createStore } from 'vuex'
import axios from 'axios'


export default createStore({
    state: {
        user: {
            'id': localStorage.getItem('id'),
            'token': localStorage.getItem('token'),
        },
        domains: {
            domains: [],
            totalDomains: '',
            totalPages: ''
        },
    },
    mutations: {
        SET_USER(state, user) {
            state.user = user
            localStorage.setItem('id', user.id)
            localStorage.setItem('token', user.token)
        },
        DELETE_USER(state) {
            state.user = { token: '' }
            localStorage.setItem('id', '')
            localStorage.setItem('token', '')
        },
        SET_DOMAINS(state, data, headers) {
            state.domains.domains = data
            state.domains.totalDomains = headers['X-WP-Total']
            state.domains.totalDomains = headers['X-WP-TotalPages']
        },
        SET_ME(state, data) {
            state.user.me = data
        },
    },
    actions: {
        login({ commit }, payload) {
            return new Promise(async (resolve, reject) => {
                try {
                    const { data } = await axios.post(`http://sslchkr.com/wp-json/jwt-auth/v1/token`, payload)
                    commit('SET_USER', data)
                    resolve(data)
                } catch(e) {
                    reject(e)
                }
            })
        },
        logout({ commit }) {
            commit('DELETE_USER')
        },
        validate({ state }) {
            return new Promise(async (resolve, reject) => {
                try {
                    const { data } = await axios({
                        url: `http://sslchkr.com/wp-json/jwt-auth/v1/token/validate`, 
                        method: 'post',
                        headers: {
                            'Authorization': `Bearer ${state.user.token}`
                        }
                    })
                    //commit('SET_USER', data)
                    resolve(data)
                } catch(e) {
                    reject(e)
                }
            })
        },
        getDomains({ commit, state }) {
            return new Promise(async (resolve, reject) => {
                try {
                    const { data, headers } = await axios.get(`http://sslchkr.com/wp-json/sslchkr/v1/author/${state.user.id}/domain`, {
                        headers: {
                            Authorization: `Bearer ${state.user.token}`
                        }
                    })
                    commit('SET_DOMAINS', data, headers)
                    resolve(data)
                } catch(e) {
                    reject(e)
                }
            })
        },
        getMe({ commit, state }) {
            return new Promise(async (resolve, reject) => {
                try {
                    const { data } = await axios.get(`http://sslchkr.com/wp-json/wp/v2/users/me`, {
                        headers: {
                            Authorization: `Bearer ${state.user.token}`
                        }
                    })
                    commit('SET_ME', data)
                    resolve(data)
                } catch(e) {
                    reject(e)
                }
            })
        },
    },
    modules: {
    }
})

CodePudding user response：

convert this

<li v-for="item in domains" :key="item.post_name">

to

<li v-for="item in domains" :key="item">

and if this doesn't work, add index as key

<li v-for="(item,idx) in domains" :key="idx">

CodePudding user response：

Please disregard this. I jumped the gun and posted the question before I knew what was wrong.