[英]Vue.js component only rendering after saving the template in asp.net core
I've set up a new vue.js template from Microsoft.AspNetCore.SpaTemplates and added a new controller and route to get a feeling for how it all works.我已经从 Microsoft.AspNetCore.SpaTemplates 设置了一个新的 vue.js 模板,并添加了一个新的控制器和路由,以了解它是如何工作的。 My problem is that the component I have added is not rendering at all.
我的问题是我添加的组件根本没有渲染。 The console shows the error:
控制台显示错误:
vendor.js?v=MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw:13856 [Vue warn]: Property or method "block" is not defined on the instance but referenced during render.
vendor.js?v=MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw:13856 [Vue 警告]:属性或方法“块”未在实例上定义,但在渲染过程中被引用。 Make sure to declare reactive data properties in the data option.
确保在数据选项中声明反应数据属性。
The weird thing is, that when the project is running and i modify the template html file with a random change, all of a sudden the component renders fine.奇怪的是,当项目运行时,我用随机更改修改模板 html 文件,突然间组件呈现正常。
Controller:控制器:
[Route("api/[controller]")]
public class BlockController : Controller
{
[HttpGet("[action]")]
public async Task<IActionResult> Get(ulong blockNumber)
{
using (var blockRepository = new MongoRepository<Models.Block>())
{
var dbBlock = await blockRepository.GetAsync(x => x.BlockNumber == blockNumber);
return dbBlock == null ? Ok(null) : Ok(new Block()
{
BlockNumber = dbBlock.BlockNumber
});
}
}
}
public class Block
{
public ulong BlockNumber { get; set; }
}
Typescript:打字稿:
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
interface Block {
BlockNumber: number;
}
@Component
export default class BlockComponent extends Vue {
block: Block;
mounted() {
fetch('api/Block/Get?blockNumber=30000')
.then(response => response.json() as Promise<Block>)
.then(data => {
this.block = data;
});
}
}
Template:模板:
<template>
<div>
<h1>Block details</h1>
<p v-if="block !== null">
Block Number: {{ block.blockNumber }}
</p>
<p v-else><em>Block not found.</em></p>
</div>
</template>
<script src="./block.ts"></script>
You need to initialize block
in your data option inside your component:您需要在组件内的数据选项中初始化
block
:
data () {
return {
block: null
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.