Визуализация компонента Vue.js только после сохранения шаблона в ядре asp.net

Question

Я установил новый шаблон vue.js от Microsoft.AspNetCore.SpaTemplates и добавил новый контроллер и маршрут, чтобы понять, как все это работает. Моя проблема в том, что компонент, который я добавил, вообще не рендерится. Консоль показывает ошибку:

vendor.js? v = MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw: 13856 [Vue warn]: свойство или метод "block" не определены в экземпляре, но на них ссылаются во время рендеринга. Обязательно объявляйте свойства реактивных данных в опции data.

Странно то, что когда проект запущен, и я изменяю 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
    }
  },