在ASP.NET Core 7的Razor页面中向Vue.js方法传递多个参数

你的现有写法已经可以实现传递多个参数的需求，以下是对写法的验证和优化建议：

1. 验证现有写法的有效性 #

你当前的代码是可行的：

<i v-on:click="DeleteSale('@item.ID','@item.Image')" class="far fa-trash-alt cursor text-danger"></i>

对应的Vue方法按顺序接收参数即可：

DeleteSale(ID, Image) {
  // 编写删除逻辑，比如调用后端接口传递参数
}

2. 语法简化与特殊字符处理 #

简化事件绑定 #

Vue支持@click作为v-on:click的简写，让代码更简洁：

<i @click="DeleteSale('@item.ID','@item.Image')" class="far fa-trash-alt cursor text-danger"></i>

处理特殊字符 #

如果@item.ID或@item.Image包含引号、换行等特殊字符，直接拼接会导致JavaScript语法错误。可以借助ASP.NET Core的工具类做转义处理：

@using System.Web
<i @click="DeleteSale('@Html.Raw(HttpUtility.JavaScriptStringEncode(item.ID.ToString()))','@Html.Raw(HttpUtility.JavaScriptStringEncode(item.Image))')" class="far fa-trash-alt cursor text-danger"></i>

通过JavaScriptStringEncode转义特殊字符，再用Html.Raw确保转义后的内容被正确渲染为JavaScript字符串。

3. 更灵活的对象传递方案 #

如果你的Vue实例管理着列表数据，建议将后端传递的销售数据序列化为Vue的响应式数据，直接传递整个对象而非单个参数，提升代码可维护性：

步骤1：在Razor视图中初始化Vue数据 #

<script>
const app = Vue.createApp({
  data() {
    return {
      sales: @Html.Raw(Json.Serialize(Model.SalesList))
    }
  },
  methods: {
    DeleteSale(saleItem) {
      // 直接通过对象访问属性
      console.log('待删除ID:', saleItem.ID);
      console.log('关联图片:', saleItem.Image);
      // 执行删除操作
    }
  }
})
app.mount('#app')
</script>

步骤2：模板中绑定点击事件 #

<div id="app">
  <div v-for="sale in sales" :key="sale.ID">
    <i @click="DeleteSale(sale)" class="far fa-trash-alt cursor text-danger"></i>
  </div>
</div>

这种方式无需手动拼接参数，还能避免特殊字符问题，同时方便后续扩展参数。

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