Kraken中使用Vue的v-for渲染列表为什么没生效？

宇文欣炅提问于 2026-03-14 20:59:19 阅读 55

框架

我在Kraken里写了个简单的列表渲染，但页面上啥也没显示，控制台也没报错，有点懵。

试过把数据写死、也检查了key值，还是不行。是不是Kraken对Vue的支持有啥限制？

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{ id: 1, name: '测试1' }, { id: 2, name: '测试2' }]
    }
  }
}
</script>

我来解答赞 9 收藏

反馈

1 条解答

园园 Dev Lv1

Kraken 对 Vue 的支持是有限的，不是所有 Vue 语法都能正常工作。

v-for 这种列表渲染指令在 Kraken 里面可能不被支持，因为 Kraken 内部的 Vue 实现和浏览器端不太一样。

你可以试试用 Kraken 推荐的方式：直接用 JavaScript 在 mounted 或者 useEffect 钩子里通过原生 API 来创建列表元素，而不是依赖 v-for 指令。

大概思路是这样：

import { useEffect } from 'react';



export default {

  setup() {

    useEffect(() => {

      const container = document.querySelector('div');

      const list = [{ id: 1, name: '测试1' }, { id: 2, name: '测试2' }];

      

      list.forEach(item => {

        const div = document.createElement('div');

        div.textContent = item.name;

        container.appendChild(div);

      });

    }, []);

  }

}

如果你坚持要用 Vue 写法，可以去 Kraken 官方仓库看看他们提供的 kraken-vue 示例，确认下哪些指令是支持的，哪些是坑。

对了，你最好检查下控制台有没有 warning 信息，有时候 Kraken 会把不支持的指令静默忽略，不一定会报 error。

2026-03-17 12:12