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

Question

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

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>

Answer 1

You need to initialize block in your data option inside your component:

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