Razor页面与Vue组合式API结合：如何将C#模型正确传递给Vue组件

我来帮你解决这个问题，你遇到的核心问题是序列化后的JSON字符串没有被Vue正确解析为JavaScript对象，下面一步步给你讲清楚怎么改：

问题根源分析 #

你之前的两种尝试都有小问题：

1. 直接用card="@JsonConvert.SerializeObject(card)"：Vue会把这个属性值当成普通字符串，所以你在组件里看到的是JSON字符串，自然没法直接访问card.Title。
2. 用:card="@JsonConvert.SerializeObject(card)"但没处理转义：Razor会自动把JSON里的双引号转义成"，导致Vue拿到的是转义后的字符串，无法解析成对象，最终出现[object Object]的异常显示。

正确的解决方案 #

我们需要让Razor输出未转义的原始JSON字符串，同时通过Vue的v-bind（也就是:card）把它解析成JavaScript对象，具体步骤如下：

1. 修改Razor页面的组件调用代码 #

在.cshtml的循环中，用@Html.Raw()包裹序列化后的JSON，同时用单引号包裹属性值（避免和JSON里的双引号冲突）：

@foreach (var card in Model.Cards)
{
    <Card :card='@Html.Raw(JsonConvert.SerializeObject(card))'></Card>
}

这里@Html.Raw()的作用是告诉Razor不要转义JSON里的特殊字符（比如双引号），让Vue能直接拿到完整的JSON结构。

2. 确认Vue组件的Props定义 #

你的组件里的Props定义是对的，但可以加上required: true来做类型校验，更容易排查问题：

<template>
  <div class="card-item">
    <h3>{{ card.Title }}</h3>
    <p class="date">{{ card.Date }}</p>
    <img :src="card.Image.Src" :alt="card.Image.Alt" />
    <p class="content">{{ card.Paragraph }}</p>
    <a :href="card.Link.Url" class="card-link">{{ card.Link.Text }}</a>
  </div>
</template>

<script setup>
const props = defineProps({
  card: {
    type: Object,
    required: true // 强制要求传入card属性，避免空值问题
  }
});
</script>

现在你应该能正常访问card.Title、card.Image.Src这些属性了。

更优的替代方案：传递整个卡片列表 #

其实没必要在Razor里循环渲染组件，更符合Vue开发习惯的方式是把整个Cards列表序列化后传给一个父组件，然后在Vue里循环渲染单个卡片：

1. Razor页面修改 #

<CardList :cards='@Html.Raw(JsonConvert.SerializeObject(Model.Cards))'></CardList>

2. 新建CardList父组件 #

<template>
  <div class="card-list">
    <!-- 在Vue里循环，更符合前端逻辑 -->
    <Card v-for="card in cards" :key="card.Title" :card="card" />
  </div>
</template>

<script setup>
const props = defineProps({
  cards: {
    type: Array,
    required: true
  }
});
</script>

这种方式减少了Razor和Vue的混合逻辑，维护起来更清晰。

额外注意事项 #

• 如果你用的是.NET Core 3.0+，也可以用System.Text.Json.JsonSerializer代替JsonConvert，但要注意配置序列化选项（比如保留属性名大小写，因为C#是大驼峰，Vue里用大驼峰也没问题）。
• 如果遇到循环引用的序列化错误，可以给JsonConvert加配置：JsonConvert.SerializeObject(card, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore })。

备注：内容来源于stack exchange，提问作者Benji40