jcreek/jcreek.github.io
1
0
Fork 0
mirror of https://github.com/jcreek/jcreek.github.io.git synced 2026-07-12 18:43:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
ea06a13dee2dcd7c1057671f303ff444ea25a7ae
jcreek.github.io/web-dev/simple-vue-spa-in-asp-dotnet-core/index.html
T

1741 lines
88 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="https://www.jcreek.co.uk/web-dev/simple-vue-spa-in-asp-dotnet-core/">
<link rel="prev" href="../dev-environment-container-vscode/">
<link rel="next" href="../dotnet-csharp/pattern-matching/">
<link rel="icon" href="../../img/favicon.ico">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.12">
<title>Creating a reactive SPA simply within an ASP.Net Core web app with Vue.js - Josh Creek's Blog</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.2afb09e1.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<script id="__analytics">function __md_analytics(){function e(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],e("js",new Date),e("config","G-MYNBTM1YQW"),document.addEventListener("DOMContentLoaded",(function(){document.forms.search&&document.forms.search.query.addEventListener("blur",(function(){this.value&&e("event","search",{search_term:this.value})}));document$.subscribe((function(){var t=document.forms.feedback;if(void 0!==t)for(var a of t.querySelectorAll("[type=submit]"))a.addEventListener("click",(function(a){a.preventDefault();var n=document.location.pathname,d=this.getAttribute("data-md-value");e("event","feedback",{page:n,data:d}),t.firstElementChild.disabled=!0;var r=t.querySelector(".md-feedback__note [data-md-value='"+d+"']");r&&(r.hidden=!1)})),t.hidden=!1})),location$.subscribe((function(t){e("config","G-MYNBTM1YQW",{page_path:t.pathname})}))}));var t=document.createElement("script");t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=G-MYNBTM1YQW",document.getElementById("__analytics").insertAdjacentElement("afterEnd",t)}</script>
<script>if("undefined"!=typeof __md_analytics){var consent=__md_get("__consent");consent&&consent.analytics&&__md_analytics()}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="amber" data-md-color-accent="amber">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#creating-a-reactive-spa-simply-within-an-aspnet-core-web-app-with-vuejs" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="Josh Creek&#39;s Blog" class="md-header__button md-logo" aria-label="Josh Creek's Blog" data-md-component="logo">
<img src="../../img/noogler-hat-edited-round.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Josh Creek's Blog
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Creating a reactive SPA simply within an ASP.Net Core web app with Vue.js
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="amber" data-md-color-accent="amber" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="amber" data-md-color-accent="amber" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/jcreek/jcreek.github.io" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
Spotted an issue?
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../deploying/docker-compose-for-asp-net-core-with-postgres-and-s3-backups/" class="md-tabs__link">
Containers & Deploying
</a>
</li>
<li class="md-tabs__item">
<a href="../../dev-team/git/" class="md-tabs__link">
Development Teams
</a>
</li>
<li class="md-tabs__item">
<a href="../../home-server/generative-ai/ollama/" class="md-tabs__link">
Home Server
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../dev-environment-container-vscode/" class="md-tabs__link">
Web Development
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="Josh Creek&#39;s Blog" class="md-nav__button md-logo" aria-label="Josh Creek's Blog" data-md-component="logo">
<img src="../../img/noogler-hat-edited-round.png" alt="logo">
</a>
Josh Creek's Blog
</label>
<div class="md-nav__source">
<a href="https://github.com/jcreek/jcreek.github.io" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
Spotted an issue?
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Containers & Deploying
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Containers & Deploying
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../deploying/docker-compose-for-asp-net-core-with-postgres-and-s3-backups/" class="md-nav__link">
<span class="md-ellipsis">
Docker Compose for ASP.Net Core with Postgres + S3 backups
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deploying/docker-compose-s3-postgres-backup-and-restore/" class="md-nav__link">
<span class="md-ellipsis">
Docker Compose for S3 Backup and Restore of PostgreSQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deploying/elasticsearch-and-kibana/" class="md-nav__link">
<span class="md-ellipsis">
Docker Compose for Elasticsearch and Kibana 7.9
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Development Teams
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Development Teams
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../dev-team/git/" class="md-nav__link">
<span class="md-ellipsis">
The way I recommend using git in a dev team
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../dev-team/readme-files/" class="md-nav__link">
<span class="md-ellipsis">
How to write an excellent readme file
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Home Server
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Home Server
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_1" >
<label class="md-nav__link" for="__nav_4_1" id="__nav_4_1_label" tabindex="0">
<span class="md-ellipsis">
Generative AI
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_1">
<span class="md-nav__icon md-icon"></span>
Generative AI
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../home-server/generative-ai/ollama/" class="md-nav__link">
<span class="md-ellipsis">
How to install Ollama with a ChatGPT-like web UI
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" >
<label class="md-nav__link" for="__nav_4_2" id="__nav_4_2_label" tabindex="0">
<span class="md-ellipsis">
TrueNAS Scale
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_2">
<span class="md-nav__icon md-icon"></span>
TrueNAS Scale
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../home-server/truenas-scale/installing-homeassistant-on-truenas-scale/" class="md-nav__link">
<span class="md-ellipsis">
Installing Home Assistant OS on Truenas Scale
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../home-server/truenas-scale/mounting-smb-shares-at-boot-on-truenas-scale/" class="md-nav__link">
<span class="md-ellipsis">
Mounting SMB shares at boot on Truenas Scale
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" checked>
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
<span class="md-ellipsis">
Web Development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Web Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dev-environment-container-vscode/" class="md-nav__link">
<span class="md-ellipsis">
Setting up remote containers for IAC dev environments in dotnet 6 with postgres and SMTP
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Creating a reactive SPA simply within an ASP.Net Core web app with Vue.js
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_3" >
<label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="">
<span class="md-ellipsis">
Dotnet & C#
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_3">
<span class="md-nav__icon md-icon"></span>
Dotnet & C#
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet-csharp/pattern-matching/" class="md-nav__link">
<span class="md-ellipsis">
C# 8 Pattern Matching
</span>
</a>
</li>
<li class="md-nav__item">
<a href="/web-dev/dotnet-csharp/semantic-kernel-vector-database/index.html" class="md-nav__link">
<span class="md-ellipsis">
Semantic Kernel (GPT with C#) - using a vector database to store embeddings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet-csharp/jsnlog-asp-net-6/" class="md-nav__link">
<span class="md-ellipsis">
Adding JSNLog to ASP .Net 6 with Serilog
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4" >
<label class="md-nav__link" for="__nav_5_4" id="__nav_5_4_label" tabindex="">
<span class="md-ellipsis">
Javascript & Typescript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_4">
<span class="md-nav__icon md-icon"></span>
Javascript & Typescript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../js/node-js-typescript/" class="md-nav__link">
<span class="md-ellipsis">
How to set up a Node.js Typescript project well
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../js/node-js-web-typescript/" class="md-nav__link">
<span class="md-ellipsis">
How to set up a Node.js Typescript web project well
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<nav class="md-tags" >
<span class="md-tag">asp</span>
<span class="md-tag">c#</span>
<span class="md-tag">dotnet</span>
<span class="md-tag">vue</span>
<span class="md-tag">web development</span>
</nav>
<h1 id="creating-a-reactive-spa-simply-within-an-aspnet-core-web-app-with-vuejs">Creating a reactive SPA simply within an ASP.Net Core web app with Vue.js</h1>
<p><em>2021-07-12</em></p>
<p><img alt="" src="/img/vuejsexample1.gif" /></p>
<p>In this post, I will cover how you can quickly and easily use Vue.js to make a reactive 'SPA' within ASP.Net Core. This is a slightly dirty way to do things, but for rapid prototyping or a simple project it does the job just fine without any unnecessary complications. By 'SPA' I mean a Single Page Application, except without any navigation as that's handled by the underlying ASP.Net Core application, as is the API called by Vue.js methods.</p>
<p>In the <code>&lt;head&gt;</code> tags of your Razor page/view, you'll need to include a reference to Vue.js, for example via a CDN.</p>
<p><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"&gt;&lt;/script&gt;</code></p>
<p>At the bottom of your Razor page/view, you'll need to include a <code>&lt;script&gt;</code> tag to hold your Vue instance definition. In Vue.js this includes:</p>
<ul>
<li>the element to have the Vue instance applied to</li>
<li>the data object including any default properties</li>
<li>computed properties (these act as if part of the data object but reactively update like functions)</li>
<li>methods (functions that can interact with the data object)</li>
</ul>
<p>In this example, it's a Vue instance for creating invoices and updating stock levels. The above gif shows some of the functionality achieved with this, including dynamically adding classes, and looping through elements in an array with markup for each.</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-0-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-0-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-0-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-0-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-0-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-0-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-0-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-0-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-0-10"> 10</a></span>
<span class="normal"><a href="#__codelineno-0-11"> 11</a></span>
<span class="normal"><a href="#__codelineno-0-12"> 12</a></span>
<span class="normal"><a href="#__codelineno-0-13"> 13</a></span>
<span class="normal"><a href="#__codelineno-0-14"> 14</a></span>
<span class="normal"><a href="#__codelineno-0-15"> 15</a></span>
<span class="normal"><a href="#__codelineno-0-16"> 16</a></span>
<span class="normal"><a href="#__codelineno-0-17"> 17</a></span>
<span class="normal"><a href="#__codelineno-0-18"> 18</a></span>
<span class="normal"><a href="#__codelineno-0-19"> 19</a></span>
<span class="normal"><a href="#__codelineno-0-20"> 20</a></span>
<span class="normal"><a href="#__codelineno-0-21"> 21</a></span>
<span class="normal"><a href="#__codelineno-0-22"> 22</a></span>
<span class="normal"><a href="#__codelineno-0-23"> 23</a></span>
<span class="normal"><a href="#__codelineno-0-24"> 24</a></span>
<span class="normal"><a href="#__codelineno-0-25"> 25</a></span>
<span class="normal"><a href="#__codelineno-0-26"> 26</a></span>
<span class="normal"><a href="#__codelineno-0-27"> 27</a></span>
<span class="normal"><a href="#__codelineno-0-28"> 28</a></span>
<span class="normal"><a href="#__codelineno-0-29"> 29</a></span>
<span class="normal"><a href="#__codelineno-0-30"> 30</a></span>
<span class="normal"><a href="#__codelineno-0-31"> 31</a></span>
<span class="normal"><a href="#__codelineno-0-32"> 32</a></span>
<span class="normal"><a href="#__codelineno-0-33"> 33</a></span>
<span class="normal"><a href="#__codelineno-0-34"> 34</a></span>
<span class="normal"><a href="#__codelineno-0-35"> 35</a></span>
<span class="normal"><a href="#__codelineno-0-36"> 36</a></span>
<span class="normal"><a href="#__codelineno-0-37"> 37</a></span>
<span class="normal"><a href="#__codelineno-0-38"> 38</a></span>
<span class="normal"><a href="#__codelineno-0-39"> 39</a></span>
<span class="normal"><a href="#__codelineno-0-40"> 40</a></span>
<span class="normal"><a href="#__codelineno-0-41"> 41</a></span>
<span class="normal"><a href="#__codelineno-0-42"> 42</a></span>
<span class="normal"><a href="#__codelineno-0-43"> 43</a></span>
<span class="normal"><a href="#__codelineno-0-44"> 44</a></span>
<span class="normal"><a href="#__codelineno-0-45"> 45</a></span>
<span class="normal"><a href="#__codelineno-0-46"> 46</a></span>
<span class="normal"><a href="#__codelineno-0-47"> 47</a></span>
<span class="normal"><a href="#__codelineno-0-48"> 48</a></span>
<span class="normal"><a href="#__codelineno-0-49"> 49</a></span>
<span class="normal"><a href="#__codelineno-0-50"> 50</a></span>
<span class="normal"><a href="#__codelineno-0-51"> 51</a></span>
<span class="normal"><a href="#__codelineno-0-52"> 52</a></span>
<span class="normal"><a href="#__codelineno-0-53"> 53</a></span>
<span class="normal"><a href="#__codelineno-0-54"> 54</a></span>
<span class="normal"><a href="#__codelineno-0-55"> 55</a></span>
<span class="normal"><a href="#__codelineno-0-56"> 56</a></span>
<span class="normal"><a href="#__codelineno-0-57"> 57</a></span>
<span class="normal"><a href="#__codelineno-0-58"> 58</a></span>
<span class="normal"><a href="#__codelineno-0-59"> 59</a></span>
<span class="normal"><a href="#__codelineno-0-60"> 60</a></span>
<span class="normal"><a href="#__codelineno-0-61"> 61</a></span>
<span class="normal"><a href="#__codelineno-0-62"> 62</a></span>
<span class="normal"><a href="#__codelineno-0-63"> 63</a></span>
<span class="normal"><a href="#__codelineno-0-64"> 64</a></span>
<span class="normal"><a href="#__codelineno-0-65"> 65</a></span>
<span class="normal"><a href="#__codelineno-0-66"> 66</a></span>
<span class="normal"><a href="#__codelineno-0-67"> 67</a></span>
<span class="normal"><a href="#__codelineno-0-68"> 68</a></span>
<span class="normal"><a href="#__codelineno-0-69"> 69</a></span>
<span class="normal"><a href="#__codelineno-0-70"> 70</a></span>
<span class="normal"><a href="#__codelineno-0-71"> 71</a></span>
<span class="normal"><a href="#__codelineno-0-72"> 72</a></span>
<span class="normal"><a href="#__codelineno-0-73"> 73</a></span>
<span class="normal"><a href="#__codelineno-0-74"> 74</a></span>
<span class="normal"><a href="#__codelineno-0-75"> 75</a></span>
<span class="normal"><a href="#__codelineno-0-76"> 76</a></span>
<span class="normal"><a href="#__codelineno-0-77"> 77</a></span>
<span class="normal"><a href="#__codelineno-0-78"> 78</a></span>
<span class="normal"><a href="#__codelineno-0-79"> 79</a></span>
<span class="normal"><a href="#__codelineno-0-80"> 80</a></span>
<span class="normal"><a href="#__codelineno-0-81"> 81</a></span>
<span class="normal"><a href="#__codelineno-0-82"> 82</a></span>
<span class="normal"><a href="#__codelineno-0-83"> 83</a></span>
<span class="normal"><a href="#__codelineno-0-84"> 84</a></span>
<span class="normal"><a href="#__codelineno-0-85"> 85</a></span>
<span class="normal"><a href="#__codelineno-0-86"> 86</a></span>
<span class="normal"><a href="#__codelineno-0-87"> 87</a></span>
<span class="normal"><a href="#__codelineno-0-88"> 88</a></span>
<span class="normal"><a href="#__codelineno-0-89"> 89</a></span>
<span class="normal"><a href="#__codelineno-0-90"> 90</a></span>
<span class="normal"><a href="#__codelineno-0-91"> 91</a></span>
<span class="normal"><a href="#__codelineno-0-92"> 92</a></span>
<span class="normal"><a href="#__codelineno-0-93"> 93</a></span>
<span class="normal"><a href="#__codelineno-0-94"> 94</a></span>
<span class="normal"><a href="#__codelineno-0-95"> 95</a></span>
<span class="normal"><a href="#__codelineno-0-96"> 96</a></span>
<span class="normal"><a href="#__codelineno-0-97"> 97</a></span>
<span class="normal"><a href="#__codelineno-0-98"> 98</a></span>
<span class="normal"><a href="#__codelineno-0-99"> 99</a></span>
<span class="normal"><a href="#__codelineno-0-100">100</a></span>
<span class="normal"><a href="#__codelineno-0-101">101</a></span>
<span class="normal"><a href="#__codelineno-0-102">102</a></span>
<span class="normal"><a href="#__codelineno-0-103">103</a></span>
<span class="normal"><a href="#__codelineno-0-104">104</a></span>
<span class="normal"><a href="#__codelineno-0-105">105</a></span>
<span class="normal"><a href="#__codelineno-0-106">106</a></span>
<span class="normal"><a href="#__codelineno-0-107">107</a></span>
<span class="normal"><a href="#__codelineno-0-108">108</a></span>
<span class="normal"><a href="#__codelineno-0-109">109</a></span>
<span class="normal"><a href="#__codelineno-0-110">110</a></span>
<span class="normal"><a href="#__codelineno-0-111">111</a></span>
<span class="normal"><a href="#__codelineno-0-112">112</a></span>
<span class="normal"><a href="#__codelineno-0-113">113</a></span>
<span class="normal"><a href="#__codelineno-0-114">114</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">createInvoice</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Vue</span><span class="p">({</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="w"> </span><span class="nx">el</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;#create-invoice&#39;</span><span class="p">,</span>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a><span class="w"> </span><span class="nx">data</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a><span class="w"> </span><span class="nx">errorMessage</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a><span class="w"> </span><span class="nx">customer</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a><span class="w"> </span><span class="nx">Name</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a><span class="w"> </span><span class="nx">Address1</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<a id="__codelineno-0-10" name="__codelineno-0-10"></a><span class="w"> </span><span class="nx">Address2</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<a id="__codelineno-0-11" name="__codelineno-0-11"></a><span class="w"> </span><span class="nx">Address3</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">,</span>
<a id="__codelineno-0-12" name="__codelineno-0-12"></a><span class="w"> </span><span class="nx">PostCode</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span>
<a id="__codelineno-0-13" name="__codelineno-0-13"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-14" name="__codelineno-0-14"></a><span class="w"> </span><span class="nx">invoiceNumber</span><span class="o">:</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">().</span><span class="nx">valueOf</span><span class="p">(),</span>
<a id="__codelineno-0-15" name="__codelineno-0-15"></a><span class="w"> </span><span class="nx">products</span><span class="o">:</span><span class="w"> </span><span class="p">[],</span>
<a id="__codelineno-0-16" name="__codelineno-0-16"></a><span class="w"> </span><span class="nx">successMessage</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;&#39;</span>
<a id="__codelineno-0-17" name="__codelineno-0-17"></a><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-0-18" name="__codelineno-0-18"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-19" name="__codelineno-0-19"></a><span class="w"> </span><span class="nx">computed</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-20" name="__codelineno-0-20"></a><span class="w"> </span><span class="nx">calculatedVat</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-21" name="__codelineno-0-21"></a><span class="w"> </span><span class="c1">// take total and get 20% of it</span>
<a id="__codelineno-0-22" name="__codelineno-0-22"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">total</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">0.2</span><span class="p">;</span>
<a id="__codelineno-0-23" name="__codelineno-0-23"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-24" name="__codelineno-0-24"></a><span class="w"> </span><span class="nx">subTotal</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-25" name="__codelineno-0-25"></a><span class="w"> </span><span class="c1">// Take total and get 80% of it</span>
<a id="__codelineno-0-26" name="__codelineno-0-26"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">total</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">0.8</span><span class="p">;</span>
<a id="__codelineno-0-27" name="__codelineno-0-27"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-28" name="__codelineno-0-28"></a><span class="w"> </span><span class="nx">total</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-29" name="__codelineno-0-29"></a><span class="w"> </span><span class="c1">// For each product, add total price</span>
<a id="__codelineno-0-30" name="__codelineno-0-30"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">total</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<a id="__codelineno-0-31" name="__codelineno-0-31"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">products</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">product</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-32" name="__codelineno-0-32"></a><span class="w"> </span><span class="nx">total</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">product</span><span class="p">.</span><span class="nx">totalPrice</span><span class="p">;</span>
<a id="__codelineno-0-33" name="__codelineno-0-33"></a><span class="w"> </span><span class="p">});</span>
<a id="__codelineno-0-34" name="__codelineno-0-34"></a>
<a id="__codelineno-0-35" name="__codelineno-0-35"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">total</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">promoDiscount</span><span class="p">;</span>
<a id="__codelineno-0-36" name="__codelineno-0-36"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-37" name="__codelineno-0-37"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-38" name="__codelineno-0-38"></a><span class="w"> </span><span class="nx">methods</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-39" name="__codelineno-0-39"></a><span class="w"> </span><span class="nx">calculateItemTotal</span><span class="p">(</span><span class="nx">product</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-40" name="__codelineno-0-40"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">totalPrice</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">product</span><span class="p">.</span><span class="nx">unitPrice</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">product</span><span class="p">.</span><span class="nx">quantity</span><span class="p">;</span>
<a id="__codelineno-0-41" name="__codelineno-0-41"></a><span class="w"> </span><span class="nx">Vue</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">product</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;totalPrice&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">totalPrice</span><span class="p">)</span>
<a id="__codelineno-0-42" name="__codelineno-0-42"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-43" name="__codelineno-0-43"></a><span class="w"> </span><span class="nx">getDuplicateBarcodeClass</span><span class="p">(</span><span class="nx">product</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-44" name="__codelineno-0-44"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">matchingBarcodes</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">products</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">obj</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-45" name="__codelineno-0-45"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">obj</span><span class="p">.</span><span class="nx">barcode</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">product</span><span class="p">.</span><span class="nx">barcode</span><span class="p">;</span>
<a id="__codelineno-0-46" name="__codelineno-0-46"></a><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-0-47" name="__codelineno-0-47"></a>
<a id="__codelineno-0-48" name="__codelineno-0-48"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">matchingBarcodes</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-49" name="__codelineno-0-49"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;alert-danger&#39;</span><span class="p">;</span>
<a id="__codelineno-0-50" name="__codelineno-0-50"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-51" name="__codelineno-0-51"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-52" name="__codelineno-0-52"></a><span class="w"> </span><span class="nx">removeProduct</span><span class="p">(</span><span class="nx">product</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-53" name="__codelineno-0-53"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">index</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">products</span><span class="p">.</span><span class="nx">findIndex</span><span class="p">(</span>
<a id="__codelineno-0-54" name="__codelineno-0-54"></a><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">barcode</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">product</span><span class="p">.</span><span class="nx">barcode</span>
<a id="__codelineno-0-55" name="__codelineno-0-55"></a><span class="w"> </span><span class="p">);</span>
<a id="__codelineno-0-56" name="__codelineno-0-56"></a>
<a id="__codelineno-0-57" name="__codelineno-0-57"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">index</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-58" name="__codelineno-0-58"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">products</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">);</span>
<a id="__codelineno-0-59" name="__codelineno-0-59"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-60" name="__codelineno-0-60"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-61" name="__codelineno-0-61"></a><span class="w"> </span><span class="nx">updateStock</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-62" name="__codelineno-0-62"></a><span class="w"> </span><span class="c1">// Check the user really wants to update the stock and start a new invoice</span>
<a id="__codelineno-0-63" name="__codelineno-0-63"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">userResponse</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">confirm</span><span class="p">(</span><span class="s2">&quot;Are you sure you wish to finish this invoice and update stock levels? You will not be able to print it again.&quot;</span><span class="p">);</span>
<a id="__codelineno-0-64" name="__codelineno-0-64"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">userResponse</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-65" name="__codelineno-0-65"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-66" name="__codelineno-0-66"></a><span class="w"> </span><span class="nx">invoiceNumber</span><span class="o">:</span><span class="w"> </span><span class="nb">String</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">invoiceNumber</span><span class="p">),</span>
<a id="__codelineno-0-67" name="__codelineno-0-67"></a><span class="w"> </span><span class="nx">products</span><span class="o">:</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">products</span><span class="p">,</span>
<a id="__codelineno-0-68" name="__codelineno-0-68"></a><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-0-69" name="__codelineno-0-69"></a>
<a id="__codelineno-0-70" name="__codelineno-0-70"></a><span class="w"> </span><span class="c1">// Update the stock &amp; log the invoice</span>
<a id="__codelineno-0-71" name="__codelineno-0-71"></a><span class="w"> </span><span class="nx">fetch</span><span class="p">(</span><span class="sb">`Invoices/UpdateStockAndLogInvoice/`</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-72" name="__codelineno-0-72"></a><span class="w"> </span><span class="nx">method</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;POST&quot;</span><span class="p">,</span>
<a id="__codelineno-0-73" name="__codelineno-0-73"></a><span class="w"> </span><span class="nx">headers</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-74" name="__codelineno-0-74"></a><span class="w"> </span><span class="s2">&quot;Content-Type&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;application/json&quot;</span><span class="p">,</span>
<a id="__codelineno-0-75" name="__codelineno-0-75"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-76" name="__codelineno-0-76"></a><span class="w"> </span><span class="nx">body</span><span class="o">:</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">data</span><span class="p">),</span>
<a id="__codelineno-0-77" name="__codelineno-0-77"></a><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-0-78" name="__codelineno-0-78"></a><span class="w"> </span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-79" name="__codelineno-0-79"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">();</span>
<a id="__codelineno-0-80" name="__codelineno-0-80"></a><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-0-81" name="__codelineno-0-81"></a><span class="w"> </span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">data</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-82" name="__codelineno-0-82"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">statusCode</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="mf">404</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-83" name="__codelineno-0-83"></a><span class="w"> </span><span class="nx">Vue</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;errorMessage&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<a id="__codelineno-0-84" name="__codelineno-0-84"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-85" name="__codelineno-0-85"></a><span class="w"> </span><span class="nx">Vue</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;successMessage&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<a id="__codelineno-0-86" name="__codelineno-0-86"></a>
<a id="__codelineno-0-87" name="__codelineno-0-87"></a><span class="w"> </span><span class="c1">// If no errors, clear the products list to be ready for the next invoice</span>
<a id="__codelineno-0-88" name="__codelineno-0-88"></a><span class="w"> </span><span class="nx">Vue</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;products&quot;</span><span class="p">,</span><span class="w"> </span><span class="p">[]);</span>
<a id="__codelineno-0-89" name="__codelineno-0-89"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-90" name="__codelineno-0-90"></a><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-0-91" name="__codelineno-0-91"></a><span class="w"> </span><span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-92" name="__codelineno-0-92"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
<a id="__codelineno-0-93" name="__codelineno-0-93"></a><span class="w"> </span><span class="nx">Vue</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;errorMessage&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">err</span><span class="p">);</span>
<a id="__codelineno-0-94" name="__codelineno-0-94"></a><span class="w"> </span><span class="p">});</span>
<a id="__codelineno-0-95" name="__codelineno-0-95"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-96" name="__codelineno-0-96"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-97" name="__codelineno-0-97"></a><span class="w"> </span><span class="nx">validateNumber</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-98" name="__codelineno-0-98"></a><span class="w"> </span><span class="c1">// Only accept integers, so prevent anything but digits 0-9</span>
<a id="__codelineno-0-99" name="__codelineno-0-99"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">keyCode</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">event</span><span class="p">.</span><span class="nx">keyCode</span><span class="p">;</span>
<a id="__codelineno-0-100" name="__codelineno-0-100"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">keyCode</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">48</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">keyCode</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">57</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-101" name="__codelineno-0-101"></a><span class="w"> </span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<a id="__codelineno-0-102" name="__codelineno-0-102"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-103" name="__codelineno-0-103"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-104" name="__codelineno-0-104"></a><span class="w"> </span><span class="nx">viewAndPrintInvoice</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-105" name="__codelineno-0-105"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">isDuplicateBarcode</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-106" name="__codelineno-0-106"></a><span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;There is a duplicate barcode - look for red barcodes and remove duplicates&quot;</span><span class="p">);</span>
<a id="__codelineno-0-107" name="__codelineno-0-107"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-108" name="__codelineno-0-108"></a><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-109" name="__codelineno-0-109"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">print</span><span class="p">();</span>
<a id="__codelineno-0-110" name="__codelineno-0-110"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-111" name="__codelineno-0-111"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-112" name="__codelineno-0-112"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-0-113" name="__codelineno-0-113"></a><span class="w"> </span><span class="p">});</span>
<a id="__codelineno-0-114" name="__codelineno-0-114"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>To hook this into the DOM, just add the element identifier to an element, for example <code>&lt;div id="create-invoice"&gt;</code> will bind a div to this Vue instance.</p>
<p>Within that, you are free to use a variety of tools, like <code>v-if</code>, interpolation and <code>v-on</code> event handlers. In this example, if there's any text in the <code>successMessage</code> property of the Vue data object, this alert div will be displayed, interpolating the message, and clearing it (thus hiding the alert) when the close button is clicked.</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span>
<span class="normal"><a href="#__codelineno-1-4">4</a></span>
<span class="normal"><a href="#__codelineno-1-5">5</a></span>
<span class="normal"><a href="#__codelineno-1-6">6</a></span>
<span class="normal"><a href="#__codelineno-1-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&quot;successMessage&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;alert alert-success alert-dismissible fade show&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;alert&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a> <span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;bi bi-check-circle-fill&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a> <span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span>Success:<span class="p">&lt;/</span><span class="nt">strong</span><span class="p">&gt;</span> {{ successMessage }}
<a id="__codelineno-1-4" name="__codelineno-1-4"></a> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;close&quot;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&quot;Close&quot;</span> <span class="na">v-on:click</span><span class="o">=</span><span class="s">&quot;successMessage = &#39;&#39;&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span><span class="ni">&amp;times;</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<a id="__codelineno-1-6" name="__codelineno-1-6"></a> <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-1-7" name="__codelineno-1-7"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>In this example, a <code>v-for</code> is used to loop through all the products in the array, producing a <code>&lt;tr&gt;</code> for each of them, with an appropriate class bound from a method taking that product as a parameter. <code>v-if</code> and <code>v-else</code> statements enable conditionally showing one (or none) of three different pooltips. The product's <code>name</code> property is interpolated and shown, as is the <code>unitPrice</code> property, which is nicely formatted for readability.</p>
<p>The <code>barcode</code> field is mapped to a <code>v-model</code>, which means as it changes it directly alters the value in the Vue data object, and as that changes this updates reactively. It also makes use of <code>v-on:blur</code> to run a method that makes an API call to retrieve product data, conditionally sets the disabled property once a barcode has been entered, and binds a class based on the output of a method taking the product as a parameter.</p>
<p>The <code>quantity</code> field also uses a <code>v-model</code>, but specifically forces it to be a number (no need for Typescript here) runs a method on keypress (the <code>@@</code> syntax is purely due to Razor escaping, normally you'd only need one) and on change.</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-2-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-2-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-2-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-2-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-2-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-2-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-2-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-2-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-2-10">10</a></span>
<span class="normal"><a href="#__codelineno-2-11">11</a></span>
<span class="normal"><a href="#__codelineno-2-12">12</a></span>
<span class="normal"><a href="#__codelineno-2-13">13</a></span>
<span class="normal"><a href="#__codelineno-2-14">14</a></span>
<span class="normal"><a href="#__codelineno-2-15">15</a></span>
<span class="normal"><a href="#__codelineno-2-16">16</a></span>
<span class="normal"><a href="#__codelineno-2-17">17</a></span>
<span class="normal"><a href="#__codelineno-2-18">18</a></span>
<span class="normal"><a href="#__codelineno-2-19">19</a></span>
<span class="normal"><a href="#__codelineno-2-20">20</a></span>
<span class="normal"><a href="#__codelineno-2-21">21</a></span>
<span class="normal"><a href="#__codelineno-2-22">22</a></span>
<span class="normal"><a href="#__codelineno-2-23">23</a></span>
<span class="normal"><a href="#__codelineno-2-24">24</a></span>
<span class="normal"><a href="#__codelineno-2-25">25</a></span>
<span class="normal"><a href="#__codelineno-2-26">26</a></span>
<span class="normal"><a href="#__codelineno-2-27">27</a></span>
<span class="normal"><a href="#__codelineno-2-28">28</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="p">&lt;</span><span class="nt">tr</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&quot;product in products&quot;</span> <span class="na">v-bind:class</span><span class="o">=</span><span class="s">&quot;getProductRowClass(product)&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a> <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;tooltip&quot;</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&quot;product.barcode.length &gt; 0 &amp;&amp; product.stockLevel - product.quantity &lt; 0&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a> <span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;bi bi-x-circle-fill text-danger&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;tooltiptext&quot;</span><span class="p">&gt;</span>You will need to order more stock to fulfill this order<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-2-7" name="__codelineno-2-7"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;tooltip&quot;</span> <span class="na">v-else-if</span><span class="o">=</span><span class="s">&quot;product.barcode.length &gt; 0 &amp;&amp; product.stockLevel - product.quantity == 0&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-8" name="__codelineno-2-8"></a> <span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;bi bi-exclamation-triangle-fill text-warning&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>
<a id="__codelineno-2-9" name="__codelineno-2-9"></a> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;tooltiptext&quot;</span><span class="p">&gt;</span>You will run out of stock<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<a id="__codelineno-2-10" name="__codelineno-2-10"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-2-11" name="__codelineno-2-11"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;tooltip&quot;</span> <span class="na">v-else-if</span><span class="o">=</span><span class="s">&quot;product.barcode.length &gt; 0 &amp;&amp; product.stockLevel - product.quantity &lt;= 10&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-12" name="__codelineno-2-12"></a> <span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;bi bi-info-circle-fill text-info&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span>
<a id="__codelineno-2-13" name="__codelineno-2-13"></a> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;tooltiptext&quot;</span><span class="p">&gt;</span>Stock will be low after this order<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<a id="__codelineno-2-14" name="__codelineno-2-14"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-2-15" name="__codelineno-2-15"></a> <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-16" name="__codelineno-2-16"></a> <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-17" name="__codelineno-2-17"></a> <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;</span>{{product.name}}<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-2-18" name="__codelineno-2-18"></a> <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-19" name="__codelineno-2-19"></a> <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-20" name="__codelineno-2-20"></a> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;barcode&quot;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&quot;product.barcode&quot;</span> <span class="na">v-on:blur</span><span class="o">=</span><span class="s">&quot;getProductInformation(product)&quot;</span> <span class="na">:disabled</span><span class="o">=</span><span class="s">&quot;product.barcode.length &gt; 0&quot;</span> <span class="na">v-bind:class</span><span class="o">=</span><span class="s">&quot;getDuplicateBarcodeClass(product)&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-21" name="__codelineno-2-21"></a> <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-22" name="__codelineno-2-22"></a> <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-23" name="__codelineno-2-23"></a> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;number&quot;</span> <span class="na">step</span><span class="o">=</span><span class="s">&quot;1&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;quantity&quot;</span> <span class="na">v-model</span><span class="err">.</span><span class="na">number</span><span class="o">=</span><span class="s">&quot;product.quantity&quot;</span> <span class="err">@@</span><span class="na">keypress</span><span class="o">=</span><span class="s">&quot;validateNumber&quot;</span> <span class="na">v-on:change</span><span class="o">=</span><span class="s">&quot;calculateItemTotal(product)&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-24" name="__codelineno-2-24"></a> <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-25" name="__codelineno-2-25"></a> <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-26" name="__codelineno-2-26"></a> <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;</span><span class="ni">&amp;#163;</span>{{parseFloat(product.unitPrice).toFixed(2)}}<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-2-27" name="__codelineno-2-27"></a> <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-2-28" name="__codelineno-2-28"></a><span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>This is a very simple, quick and dirty example, but hopefully it gives you an idea of the kind of things you can quickly and easily achieve using Vue.js in this way. While this example uses ASP.Net Core, you could easily plug this into any other website, so long as it's using HTML, CSS and JavaScript, and there is an API to make requests to.</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2011 - 2025 Josh Creek
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://github.com/jcreek" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
<a href="https://twitter.com/jcreek23" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253"/></svg>
</a>
<a href="https://www.linkedin.com/in/jrcreek" target="_blank" rel="noopener" title="www.linkedin.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5m282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9z"/></svg>
</a>
<a href="https://www.instagram.com/scruffy238/" target="_blank" rel="noopener" title="www.instagram.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141m0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7m146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8m76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8M398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<div class="md-consent" data-md-component="consent" id="__consent" hidden>
<div class="md-consent__overlay"></div>
<aside class="md-consent__inner">
<form class="md-consent__form md-grid md-typeset" name="consent">
<h4>Cookie consent</h4>
<p>I use cookies to recognize your repeated visits and preferences, as well as to measure the effectiveness of my documentation and whether users find what they're searching for. With your consent, you're helping me to make my documentation better.</p>
<input class="md-toggle" type="checkbox" id="__settings" checked>
<div class="md-consent__settings">
<ul class="task-list">
<li class="task-list-item">
<label class="task-list-control">
<input type="checkbox" name="analytics" checked>
<span class="task-list-indicator"></span>
Google Analytics
</label>
</li>
<li class="task-list-item">
<label class="task-list-control">
<input type="checkbox" name="github" checked>
<span class="task-list-indicator"></span>
GitHub
</label>
</li>
</ul>
</div>
<div class="md-consent__controls">
<button class="md-button md-button--primary">Accept</button>
</div>
</form>
</aside>
</div>
<script>var consent=__md_get("__consent");if(consent)for(var input of document.forms.consent.elements)input.name&&(input.checked=consent[input.name]||!1);else"file:"!==location.protocol&&setTimeout((function(){document.querySelector("[data-md-component=consent]").hidden=!1}),250);var form=document.forms.consent;for(var action of["submit","reset"])form.addEventListener(action,(function(e){if(e.preventDefault(),"reset"===e.type)for(var n of document.forms.consent.elements)n.name&&(n.checked=!1);__md_set("__consent",Object.fromEntries(Array.from(new FormData(form).keys()).map((function(e){return[e,!0]})))),location.hash="",location.reload()}))</script>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.instant", "navigation.tracking", "navigation.tabs", "navigation.tabs.sticky", "navigation.sections", "toc.follow", "toc.integrate", "navigation.top", "search.suggest", "search.highlight", "search.share"], "search": "../../assets/javascripts/workers/search.f8cc74c7.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../../assets/javascripts/bundle.c8b220af.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink