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

feat(*): Add additional examples

Browse Source
This commit is contained in:
Josh Creek
2021-07-13 08:28:11 +01:00
parent e8ab66e6af
commit b11a65bcd3
1 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/web-dev/simple-vue-spa-in-asp-dotnet-core.md
+49
View File
@@ -147,4 +147,53 @@ In this example, it's a Vue instance for creating invoices and updating stock le
To hook this into the DOM, just add the element identifier to an element, for example `<div id="create-invoice">` will bind a div to this Vue instance.
Within that, you are free to use a variety of tools, like v-if, interpolation and v-on event handlers. In this example, if there's any text in the `successMessage` 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.
```html
<div v-if="successMessage" class="alert alert-success alert-dismissible fade show" role="alert">
<i class="bi bi-check-circle-fill"></i>
<strong>Success:</strong> {{ successMessage }}
<button type="button" class="close" aria-label="Close" v-on:click="successMessage = ''">
<span aria-hidden="true">&times;</span>
</button>
</div>
```
In this example, a v-for is used to loop through all the products in the array, producing a `<tr>` for each of them, with an appropriate class bound from a method taking that product as a parameter. V-if and v-else statements enable conditionally showing one (or none) of three different pooltips. The product's name property is interpolated and shown, as is the unitPrice property, which is nicely formatted for readability.
The barcode field is mapped to a v-model, 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 v-on:blur 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.
The quantity field also uses a v-model, but specifically forces it to be a number (no need for Typescript here) runs a method on keypress (the `@@` syntax is purely due to Razor escaping, normally you'd only need one) and on change.
```html
<tr v-for="product in products" v-bind:class="getProductRowClass(product)">
<td>
<div class="tooltip" v-if="product.barcode.length > 0 && product.stockLevel - product.quantity < 0">
<i class="bi bi-x-circle-fill text-danger"></i>
<span class="tooltiptext">You will need to order more stock to fulfill this order</span>
</div>
<div class="tooltip" v-else-if="product.barcode.length > 0 && product.stockLevel - product.quantity == 0">
<i class="bi bi-exclamation-triangle-fill text-warning"></i>
<span class="tooltiptext">You will run out of stock</span>
</div>
<div class="tooltip" v-else-if="product.barcode.length > 0 && product.stockLevel - product.quantity <= 10">
<i class="bi bi-info-circle-fill text-info"></i>
<span class="tooltiptext">Stock will be low after this order</span>
</div>
</td>
<td>
<label>{{product.name}}</label>
</td>
<td>
<input type="text" name="barcode" v-model="product.barcode" v-on:blur="getProductInformation(product)" :disabled="product.barcode.length > 0" v-bind:class="getDuplicateBarcodeClass(product)">
</td>
<td>
<input type="number" step="1" name="quantity" v-model.number="product.quantity" @@keypress="validateNumber" v-on:change="calculateItemTotal(product)">
</td>
<td>
<label>&#163;{{parseFloat(product.unitPrice).toFixed(2)}}</label>
</td>
</tr>
```
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.