vue組件不顯示計算屬性

這是一個 Vue3 專案。當 Domains.vue 被掛載時，getDomains 被調度到 vuex，并且資料被正確設定，如 vue 開發工具所示。

由于某種原因，資料沒有顯示在 for 回圈的模板中。也許你們中的一個很棒的人可以幫助我弄清楚為什么不呢？

域.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 商店

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: {
    }
})

uj5u.com熱心網友回復：

轉換這個

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

到

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

如果這不起作用，請添加索引作為鍵

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

uj5u.com熱心網友回復：

請忽略這一點。在我知道出了什么問題之前，我跳了槍并發布了問題。

標籤：

上一篇：欄位值被推送到錯誤的陣列

下一篇：防止同時呼叫同一個Promise/async函式