Как передать параметр из корня Vue в компонент? - PullRequest
Новая
       7

Как передать параметр из корня Vue в компонент?

0 голосов
/ 22 апреля 2019

Я пытаюсь передать строку из index.cshtml в корневой элемент vue.

параметр, который я пытаюсь передать: userId

Просмотр: Index.cshtml (здесь я получаю свой параметр) 

@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 (где мне нужен параметр, чтобы пойти) 

<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>

1 Ответ

0 голосов
/ 22 апреля 2019

Вы передаете «userId» в своем шаблоне, но userId не определен в функции данных вашего vue и, следовательно, не является реактивным, что означает, что вы не можете использовать его в DOM, если не объявите его в функции данных.

Такжекорневое представление не требует реквизитов, реквизиты должны иметь только тот элемент, который компонент будет получать от родительского компонента.

Таким образом, ваш код для корневого элемента должен выглядеть примерно так: 

import Vue from "vue";
import Cart from "./Components/Cart.vue";

new Vue({
    el: "#cartApp",
    template: '<Cart :userId="userId" />',
    data: function(){
      return {
        userId: userid, // Accessing userId from global scope as it is defined in Index.cshtml.
      }
    },
    components: {
        Cart
    }
});
...