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>

Bhojendra Rauniyar · Accepted Answer · 2018-03-04 11:27:45Z

1

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

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

edited Mar 4, 2018 at 11:27

answered Mar 4, 2018 at 11:15

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erik Over a year ago

Thanks. That was it.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related