Currently, I am attempting to transfer a string value from index.cshtml to the main Vue element.
The specific parameter I want to pass is: userId
Location: Index.cshtml (this is where the parameter is obtained)
@using Microsoft.AspNetCore.Identity
@inject SignInManager<User> SignInManager
@using LaBouteilleDamour.Domain.Models;
@inject UserManager<User> UserManager
@if (SignInManager.IsSignedIn(User))
{
User user = await UserManager.GetUserAsync(User);
var userid = UserManager.GetUserId(User);
<div id="cartApp" userId:"userid"></div>
<script src="./js/Cart.bundle.js" asp-append-version="true"></script>
}
Main Vue Element: Cart.boot.ts
import Vue from "vue";
import Cart from "./Components/Cart.vue";
new Vue({
el: "#cartApp",
template: '<Cart :userId="userId" />',
props: {
*userId: String,
},
components: {
Cart
}
});
Vue Component: Cart.vue (where the parameter is needed)
<template>
/*HTML*/
</template>
<script lang="ts">
import ShoppingCartItem from "../Components/ShoppingCartItem.vue";
import ShoppingCartService, { ICartItem } from "./AP
/ShoppingCartService";
import Vue from "vue";
interface IShoppingCartpageData {
items: ICartItem[],
}
export default Vue.extend({
data(): IShoppingCartpageData {
return {
items: [],
}
},
props: {
userId: {
type: String,
required:true,
}
},
...
})
</script>