时间戳

首页 > 解决方案 > 将数据传递给 Vue.js 组件

c# - 将数据传递给 Vue.js 组件

问题描述

我在将数据传递给 vue 组件时遇到问题。

该.cshtml文件如下所示：

@using Newtonsoft.Json;

@{
    var myString = "Hello world";
    var myJsonData = JsonConvert.SerializeObject(model);
}

<div id="gallery">
    <Gallery my-jsonprop="@myJsonData" 
             :my-jsonprop2="@myJsonData" 
             my-text="Hello world" 
             :my-text2="@myString" 
             v-bind:my-text3="@myString"></Gallery>
</div>

...和Gallery.vue组件是这样的：

<template>
    <div>
        <p>{{ test }}</p>
        <p>{{ myJsonProp }}</p>
        <p>{{ myJsonProp2 }}</p>
        <p>{{ myText }}</p>
        <p>{{ myText2 }}</p>
        <p>{{ myText3 }}</p>
    </div>
</template>

<script>
    export default {
        name: 'Gallery',
        props: {
            myJsonprop: {
                type: Object,
                required: true
            },
            myJsonprop2: {
                type: Object,
                required: true
            },
            myText: {
                type: String,
                required: true
            },
            myText2: {
                type: String,
                required: true
            },
            myText3: {
                type: String,
                required: true
            }
        },
        computed: {
            test() {
                return "Foo bar"
            },
        }
    };
</script>

...最后我的main.js样子是这样的：

import Vue from "vue";
import Gallery from "../Gallery.vue"

new Vue({
    el: '#gallery',
    render: h => h(Gallery)
});

但是两个属性都没有传递给组件，而测试的计算值正在显示。我错过了什么吗？

标签： c#vue.jsrazor

解决方案

传递道具的正确方法是将 CamelCase 变量更改为破折号名称，因此在您的组件中将如下所示：

 <Gallery :my-json-prop="@myJsonData" 
             :my-json-prop2="@myJsonData" 
             my-text="Hello world" 
             :my-text2="@myString" 
             v-bind:my-text3="@myString"></Gallery>

请注意，如果您传递一个 javascript 变量，您需要使用 'v-bind' 或在道具名称前添加一个冒号 (:)。

如果它只是一个纯文本，那么你不需要'v-bind'

my-text="Hello world"

更多细节请查看vue 官方文档

推荐阅读