uni-app uni-cms-article内容详情无法展示

操作步骤：

使用uni-cms和uni-cms-article插件，在内容列表中点击进入内容详情不显示具体内容，只有title信息

预期结果：

使用uni-cms和uni-cms-article插件，内容详情正常显示

实际结果：

使用uni-cms和uni-cms-article插件，内容详情不显示具体内容，只有title信息

bug描述：

Invalid prop: type check failed for prop “content”. Expected Array, got Object
使用uni-cms插件，uni-cms-article客户端H5查看内容详情中不显示内容，看到官方说要同步 uni-cms-articles.schema.ext.js文件，但是我这边admin和article共用一个云空间，现在database下已经有一个 uni-cms-articles.schema.ext.js文件了，在uni-cms-article里面再创建一个的话会报 uni-cms-articles.schema.ext.js文件冲突。
并且浏览器console提示Invalid prop: type check failed for prop “content”. Expected Array, got Object

yibo5220 1楼•1 天前

uni-cms-articles.schema.ext.js 可能不是最新的，建议重新下来最新版的 uni-cms 插件

wuwangju 2楼•1 天前

在使用 uni-app 开发时，如果遇到 uni-cms-article 组件无法展示内容详情的问题，可以从以下几个方面进行排查和解决：

1. 数据源问题

确保传递给 uni-cms-article 组件的数据是正确的，并且包含了需要展示的内容详情。

<uni-cms-article :content="articleContent"></uni-cms-article>

在 script 部分，确保 articleContent 是正确的：

export default {
  data() {
    return {
      articleContent: {
        title: '文章标题',
        content: '这是文章内容...', // 确保 content 字段存在且不为空
        // 其他字段...
      }
    };
  }
};

2. 组件引入问题

确保你已经正确引入了 uni-cms-article 组件。如果你使用的是自定义组件，确保路径和组件名称正确。

import uniCmsArticle from '@/components/uni-cms-article.vue';

export default {
  components: {
    uniCmsArticle
  }
};

3. 样式问题

有时候可能由于样式问题导致内容无法显示。检查是否有样式覆盖了内容区域，或者是否有隐藏内容的样式。

/* 确保没有隐藏内容的样式 */
.uni-cms-article {
  display: block !important;
  visibility: visible !important;
}

4. 生命周期问题

确保在正确的生命周期钩子中获取数据并更新 articleContent。例如，在 mounted 钩子中获取数据：

export default {
  data() {
    return {
      articleContent: {}
    };
  },
  mounted() {
    this.fetchArticleContent();
  },
  methods: {
    async fetchArticleContent() {
      // 假设你从 API 获取数据
      const response = await this.$http.get('/api/article/123');
      this.articleContent = response.data;
    }
  }
};

5. 组件内部问题

检查 uni-cms-article 组件内部的实现，确保它正确处理了传入的 content 数据。如果组件内部有错误或逻辑问题，也可能导致内容无法展示。

6. 调试与日志

使用 console.log 或其他调试工具，检查数据是否正常传递到组件中，以及组件内部是否有错误抛出。

export default {
  mounted() {
    console.log('Article Content:', this.articleContent);
  }
};

7. 网络请求问题

如果内容是通过网络请求获取的，确保网络请求成功，并且返回的数据格式正确。

async fetchArticleContent() {
  try {
    const response = await this.$http.get('/api/article/123');
    if (response.status === 200) {
      this.articleContent = response.data;
    } else {
      console.error('Failed to fetch article content:', response.statusText);
    }
  } catch (error) {
    console.error('Error fetching article content:', error);
  }
}