在VueJs组件

Question

为避免多次重复重写相同的代码，我使用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'。”

P.S： 1）在原始代码中使用输入Hidden来操作bs jQuery select2

2）不要介意elTarget和elType：p它实际上是相同的东西，除了我懒得骆驼这个词：p

3）我试图包裹内部@ {}但仍然切换相同的错误

Answer 1

你不能使用Razor＆＃39; inside＆＃39;一个Vue组件，因为Raz在Vue在浏览器中执行其操作之前生成页面服务器端。你有什么在Razor页面内有一个Vue组件。 elType被定义为Vue prop，所以它很可能不在你的视图包中？

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

Answer 2

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

查看文件

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

Vue文件

props: {
  prop1: Boolean,
  prop2: String
}