Vue.js 组件仅在 asp.net 核心中保存模板后呈现

Question

我已经根据 Microsoft.AspNetCore.SpaTemplates 设置了一个新的 vue.js 模板并添加了一个新的控制器和路由以了解它的工作原理。我的问题是我添加的组件根本没有渲染。控制台显示错误：

vendor.js?v=MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw:13856 [Vue warn]: Property or method "block" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

奇怪的是，当项目是运行并且我用随机更改修改模板 html 文件时，突然间组件渲染正常。

控制器：

[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; }
}

打字稿：

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>
    <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>

Answer 1

您需要在组件内的数据选项中初始化 block：

 data () {
    return {
      block: null
    }
  },

Vue.js 组件仅在 asp.net 核心中保存模板后呈现

Vue.js component only rendering after saving the template in asp.net core

javascript

c#

vue.js

asp.net-core

spa-template