我对Vue非常陌生,所以请原谅我的术语不准确。我有一个.NET Core MVC项目,其中包含小的、单独的vue页面。在我的当前页面上,我从控制器返回一个视图,其中包含:
@model long;
<div id="faq-category" v-bind:faqCategoryId="@Model"></div>
@section Scripts {
<script src="~/scripts/js/faqCategory.js"></script>
}
在我发送项目id的地方,这个页面将抓取并创建编辑表单。faqCategory.js
是编译后的vue应用程序。我需要在初始化时将long
参数传递给vue应用程序,这样它就可以获取完整的对象。我用main.ts
挂载它,如下所示:
import { createApp } from 'vue'
import FaqCategoryPage from './FaqCategoryPage.vue'
createApp(FaqCategoryPage)
.mount('#faq-category');
如何将我的faqCategoryId
导入vue应用程序以启动初始化并加载对象?我的v-bind
尝试似乎不起作用-我在vue组件上有一个@Prop(Number) readonly faqCategoryId: number = 0;
,但它始终是0
。
我的FaqCategoryPAge.vue脚本很简单:
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from 'vue-property-decorator'
import Card from "@/Card.vue";
import axios from "axios";
import FaqCategory from "../shared/FaqCategory";
@Options({
components: {
Card,
},
})
export default class FaqCategoryPage extends Vue {
@Prop(Number) readonly faqCategoryId: number = 0;
mounted() {
console.log(this.faqCategoryId);
}
}
</script>
5条答案
按热度按时间t0ybt7op1#
似乎是将props传递给根示例vie属性,这些属性放置在应用程序装载到is not supported上的元素上
您可以使用
data-
属性轻松解决此问题第二代
第一个
第三代
第一个
最大的缺点是从
data-
属性中提取的所有内容都是字符串,因此如果组件需要其他内容(Number
、Boolean
等),则需要自己进行转换。当然,还有一个选择是将组件向下推一层,只要使用
v-bind
(:counter
),就会将正确的JS类型传递到组件中:第一个
只是一个想法(不是真实的的问题)
不是很确定,但它可能是一个问题,与道具 shell
尝试将MVC视图更改为:
bvk5enib2#
对于Michal Levý's关于Vue 3的回答,您还可以使用单个文件组件实现该模式:
应用程序.html
应用程序.js
我的组件.vue
或者,您甚至可以从父HTML页面上的任何位置获取数据,例如:
应用程序.html
应用程序.js
我的组件.vue
要回答TheStoryCoder's问题:您需要使用一个数据属性。我上面的答案演示了如何在挂载时将一个值从父DOM传递到Vue应用程序。如果您想在挂载后更改
message
的值,您需要这样做(为了清楚起见,我将数据属性命名为myMessage
,但您也可以使用相同的属性名称message
):ncgqoxb03#
因此,我对.NET和模型所做的事情一点也不熟悉,但Vue将DOM元素仅视为占位符,它不会向它扩展与应用程序中的组件相同的功能。
所以
v-bind
是不起作用的,即使没有React性的值,也没有选择。您可以尝试黑客访问该值并将其分配给数据,例如...
第一个
在这里,你从html dom元素中获取值,并赋值给一个
data
。我建议使用data而不是props的原因是props被设置为只写,所以你不能覆盖它们,所以我使用了一个变量props
来定义要在dom元素中查找的props。另一个选项
就是使用
inject/provide
只使用js来提供变量会更简单,但假设您希望在mvc框架中使用它,因此它只通过视图来管理。此外,您可以通过选择您希望传递给应用程序的确切属性来使其更简单,但这提供了一个更好的“框架”以供重用。
第一次
jqjz2hbq4#
正如我在下面的示例中所尝试的那样。
您可以执行以下操作:
eqqqjvef5#
所有其他答案可能都有效,但对于Vue 3,简单的方法是: