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

Question

我在将数据传递给 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)
});

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

Answer 1

经过大量研究，我自己弄明白了。似乎我的 webpack.config.js 缺少使用单个文件组件的关键内容:

resolve: {
    extensions: [".ts", ".tsx", ".js", ".js", ".vue", ".json"],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.join(__dirname, "dist")
    }
}

这完全为我解决了!