如何通过JSON数据使用v-for渲染元素？解决urls未使用报错

核心原因 #

你直接在script里定义的urls变量不属于Vue组件的响应式数据范畴，模板无法直接读取到它，同时ESLint会检测到变量声明后未被有效使用，抛出提示。

具体修复方案 #

根据你使用的Vue版本，分两种场景处理：

场景1：Vue 3 <script setup> 语法 #

要用ref把数组包装成响应式数据，模板就能直接访问了：

<script setup>
import { ref } from 'vue'
// 用ref包裹数组，转为响应式数据
const urls = ref([
  { id: 1, link: 'https://example.com/1' },
  { id: 2, link: 'https://example.com/2' }
])
</script>

<template>
  <ul>
    <li v-for="url in urls" :key="url.id">
      {{ url.link }}
    </li>
  </ul>
</template>

场景2：Vue 3 Options API / Vue 2 #

把urls放到组件的data选项里，成为响应式数据的一部分：

<script>
export default {
  data() {
    return {
      urls: [
        { id: 1, link: 'https://example.com/1' },
        { id: 2, link: 'https://example.com/2' }
      ]
    }
  }
}
</script>

<template>
  <ul>
    <li v-for="url in urls" :key="url.id">
      {{ url.link }}
    </li>
  </ul>
</template>

额外注意点 #

• v-for必须绑定唯一的:key属性，一般用数组项的唯一标识（比如id），避免渲染异常。
• 如果urls是异步请求获取的，要确保赋值给响应式变量：

  // Vue 3 Composition API示例
  import { ref, onMounted } from 'vue'
  const urls = ref([])
  
  onMounted(async () => {
    const res = await fetch('你的JSON接口地址')
    urls.value = await res.json()
  })
  

内容的提问来源于stack exchange，提问作者Sianglife