在 VueJs 组件中使用 Razor答案

【问题标题】：Using Razor inside VueJs Component在 VueJs 组件中使用 Razor
【发布时间】：2017-07-05 14:38:09
【问题描述】：

为了避免重复多次重写相同的代码，我使用 VueJs 组件功能来制作一个包含 Select 下拉列表的组件。代码是这样的

 Vue.component('select-component', {
        template: `
            <label>elType</label>
            <div class="col-md-colwidth">
            <select>
                <option value=""></option>
                @foreach (elType s in ViewBag.elTypes)
                {
                    <option value="@s[elType+"ID"]">@s["Designation"+elType]</option>
                }
            </select>
            <input type="hidden" v-model="elTarget">
            </div>
            `,
        props: {
            elType: {
                type: String,
                default: 'User'
            },
            elTarget: {
                type: String,
                default: 'user'
            },
            colwidth: {
                type: int,
                default: '3'},


        }
    })

如您所见，我需要一些从 ViewBag 带来的数据列表但我得到的只是 Razor 总是忽略它在 Vue 组件内并给出“找不到类型或命名空间名称 'elType'”。

附注： 1）输入隐藏在原始代码中用于操作bs jQuery select2

2) 不要介意 elTarget 和 elType :p 这实际上是一回事，只是我懒得用驼峰命名这个词 :p

3)我试图把里面的@{ } 包裹起来，但还是切换了同样的错误

【问题讨论】：

标签： asp.net-mvc razor vue.js

【解决方案1】：

您不能在 Vue 组件“内部”使用 Razor，因为 Razor 会在 Vue 在浏览器中执行其操作之前生成页面服务器端。 Razor 页面内有一个 Vue 组件。 elType 被定义为一个 Vue prop，所以它可能不在你的视图包中？

无论如何，请不要这样做！使用 Razor 或 Vue。如果您选择 Vue，您的 vue 组件是静态 .js 或 .vue 文件，您的数据通过 AJAX 调用到达，并且您在浏览器中使用v-for 循环遍历 elTypes。任何其他方式都会导致疯狂:-)

【讨论】：

【解决方案2】：

如有必要，您可以将带有道具的剃须刀发送到组件：

查看文件

<component-name :prop1="@Model.somethingOtherThanString" prop2="@Model.aString"></component-name>

Vue 文件

props: {
  prop1: Boolean,
  prop2: String
}

【讨论】：