Laravel 8 + Vue项目中MySQL存储的数组字段渲染异常问题求助

你的问题核心在于tags字段的格式不对——数据库里存的是HTML转义后的JSON字符串，而非真正的数组，所以Vue把它当成普通字符串遍历，自然会把每个字符拆成独立的<a>标签。下面给你两种实用的解决思路，按需选择：

方法一：后端（Laravel）处理推荐 #

既然用了Laravel，最好在数据返回前端前就把格式转好，这样前端不用额外处理。你可以在Article模型里定义一个访问器，自动把转义后的字符串转成数组：

// app/Models/Article.php
class Article extends Model
{
    // 定义tags字段的访问器
    public function getTagsAttribute($value)
    {
        // 第一步：把HTML实体（"）转成普通双引号
        $decodedStr = htmlspecialchars_decode($value);
        // 第二步：把JSON字符串解析成PHP数组
        return json_decode($decodedStr, true);
    }
}

这样当你通过API返回Article数据时，tags字段会自动变成数组，前端直接用v-for="tag in article.tags"就能正常遍历，不需要修改前端代码~

方法二：前端（Vue）处理如果后端不方便修改 #

如果暂时没法调整后端逻辑，可以在Vue组件里手动处理字符串转数组：

方案1：用计算属性 #

在你的Vue组件里添加一个计算属性，专门处理tags字段：

<template>
  <!-- 其他代码 -->
  <li>
    <i class="mdi mdi-tag-text-outline"></i>
    <a href="#" v-for="(tag, index) in processedTags" :key="index">
      {{ tag }}
    </a>
  </li>
  <!-- 其他代码 -->
</template>

<script>
export default {
  data() {
    return {
      article: {} // 从API获取的文章数据
    }
  },
  computed: {
    processedTags() {
      if (!this.article.tags) return [];
      // 1. 替换所有&quot;为双引号
      const rawJson = this.article.tags.replace(/&quot;/g, '"');
      // 2. 解析成数组，加try-catch避免解析失败报错
      try {
        return JSON.parse(rawJson);
      } catch (e) {
        return [];
      }
    }
  },
  // 其他生命周期钩子（比如mounted获取数据）
}
</script>

方案2：获取数据时直接处理 #

如果你是在mounted或者axios请求回调里获取的文章数据，可以直接在拿到数据后处理：

<script>
export default {
  data() {
    return {
      article: {}
    }
  },
  mounted() {
    axios.get('/api/articles/xxx').then(res => {
      const article = res.data;
      // 处理tags字段
      if (article.tags) {
        const rawJson = article.tags.replace(/&quot;/g, '"');
        article.tags = JSON.parse(rawJson);
      }
      this.article = article;
    });
  }
}
</script>

额外提醒 #

记得给v-for加上:key属性，这是Vue的最佳实践，能避免渲染时出现警告或异常。

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