i am trying to pass a string from Vue root to component, i am rather new to vue and not sure how to correctly pass data.
the parameter i am trying to pass is: userId
View: Index.cshtml ( this is where i get my parameter )
@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>
}
Vue root: 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 i need the parameter to go )
<template>
</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>
What I have tried:
Variety of props and ways to access them, but i have no idea..