ASP.net Core MVC - DateTime Variable Doesn't Display Expected Value - asp.net-core

I am working on a website where I need to set the ApplicationStartDate & ApplicationEndDate. When I perform this operation, ApplicationStartDate displays correctly but ApplicationEndDate displays the value of previous record which should not be the case.
Here is the .cshtml file :
#model Derawala.Models.ViewModels.ParentForApply
#{
ViewData["Title"] = "Set Application Period";
Layout = "_Layout";
}
<h1 class="text-success mt-3"><i class="fas fa-calendar-week"></i> Set Date Range For Scholarship Acceptance :</h1>
<hr class="mx-n3" />
#if (ViewBag.IsDurationSet)
{
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong><i class="fas fa-check-circle"></i> Success!</strong> Application Acceptance Is Set From <b>#WC.AppStartDate.ToString("MMMM dd yyyy")</b> To <b>#WC.AppEndDate.ToString("MMMM dd yyyy")</b>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
}
#if (WC.AppStartDate == DateTime.MinValue || WC.AppEndDate == DateTime.MinValue)
{
<form method="post">
<div class="row">
<div class="col-md-2">
<h4 class="text-primary p-2"><i class="fas fa-hand-point-right"></i> Start Date :</h4>
</div>
<div class="col-md-4">
<input type="date" asp-for="#Model.AppPeriod.AppStartDate" class="form-control form-control-lg" required />
</div>
<div class="text-primary col-md-2">
<h4 class="p-2"><i class="fas fa-hand-point-right"></i> End Date :</h4>
</div>
<div class="col-md-4">
<input type="date" asp-for="#Model.AppPeriod.AppEndDate" class="form-control form-control-lg" required />
</div>
</div>
<div class="row d-flex justify-content-center mt-3">
<div class="col-md-2">
<button type="submit" style="font-weight:bolder;" class="btn btn-success w-100 text-white mt-1">Set Duration <i class="fas fa-calendar-check"></i></button>
</div>
<div class="col-md-2">
<button type="reset" style="font-weight:bolder;" class="btn btn-warning w-100 mt-1">Reset Date <i class="fas fa-calendar"></i></button>
</div>
</div>
</form>
}
else
{
<h3 class="text-primary"><u>Currently Set As</u> : </h3>
<div class="row">
<div class="col-md-2">
<h4 class="text-danger p-2"><i class="fas fa-hand-point-right"></i> <u>Start</u> <u>Date</u> :</h4>
</div>
<div class="col-md-4">
<h4 class="p-2">#WC.AppStartDate.ToString("dd-MM-yyyy")</h4>
</div>
<div class="col-md-2">
<h4 class="text-danger p-2"> <i class="fas fa-hand-point-right"></i> <u>End</u> <u>Date</u> :</h4>
</div>
<div class="col-md-4">
<h4 class="p-2">#WC.AppEndDate.ToString("dd-MM-yyyy")</h4>
</div>
</div>
<br /><br />
<form method="post">
<div class="row">
<div class="col-md-2">
<h4 class="text-primary p-2"><i class="fas fa-hand-point-right"></i> Start Date :</h4>
</div>
<div class="col-md-4">
<input type="date" asp-for="#Model.AppPeriod.AppStartDate" class="form-control form-control-lg" required />
</div>
<div class="text-primary col-md-2">
<h4 class="p-2"><i class="fas fa-hand-point-right"></i> End Date :</h4>
</div>
<div class="col-md-4">
<input type="date" asp-for="#Model.AppPeriod.AppEndDate" class="form-control form-control-lg" required />
</div>
</div>
<div class="row d-flex justify-content-center mt-3">
<div class="col-md-2">
<button type="submit" style="font-weight:bolder;" class="btn btn-success w-100 text-white mt-1">Set Duration <i class="fas fa-calendar-check"></i></button>
</div>
<div class="col-md-2">
<button type="reset" style="font-weight:bolder;" class="btn btn-warning w-100 mt-1">Reset Date <i class="fas fa-calendar"></i></button>
</div>
</div>
</form>
}
[HttpGet] Controller Method :
[HttpGet]
public async Task <IActionResult> AppPeriod(bool IsSuccess=false)
{
ParentForApply ParentVM = new ParentForApply();
int count = await _db.AppDuration.CountAsync();
if (count == 0)
{
WC.AppStartDate = new DateTime();
WC.AppEndDate = new DateTime();
}
else
{
WC.AppStartDate = await _db.AppDuration.MaxAsync(i => i.AppStartDate);
WC.AppEndDate = await _db.AppDuration.MaxAsync(i => i.AppEndDate);
}
ViewBag.IsDurationSet = IsSuccess;
return View();
}
[HttpPost] Controller Method :
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> AppPeriod(ParentForApply ParentVM)
{
int id = await _db.AppDuration.MaxAsync(i => i.Id);
var data = await _db.AppDuration.FindAsync(id);
_db.AppDuration.Remove(data);
AppDurationPeriod app = new AppDurationPeriod()
{
AppStartDate = ParentVM.AppPeriod.AppStartDate,
AppEndDate = ParentVM.AppPeriod.AppEndDate
};
WC.AppStartDate = app.AppStartDate;
WC.AppEndDate = app.AppEndDate;
await _db.AppDuration.AddAsync(app);
await _db.SaveChangesAsync();
return RedirectToAction("AppPeriod",new { IsSuccess = true});
}
I am deleting the last inserted record and inserting new record in the table to use as the latest dates.
It can be seen in the images that, database has stored the correct values but website doesn't show the same value.
In the second line of else block of the last image, something phishy happenes when I debug the code. Second line of that else block somehow changes the value of AppEndDate from the original value to 30-06-2022

This is because when you load the page, the largest data is fetched from the database table by default, you can change the HttpGet method you use to get the data like this:
[HttpGet]
public async Task<IActionResult> AppPeriod(bool IsSuccess = false)
{
ParentForApply ParentVM = new ParentForApply();
int count = await _db.AppDuration.CountAsync();
if (count == 0)
{
WC.AppStartDate = new DateTime();
WC.AppEndDate = new DateTime();
}
else
{
int id = await _db.AppDuration.MaxAsync(i => i.Id);
var data = await _db.AppDuration.FindAsync(id);
WC.AppStartDate = data.AppStartDate;
WC.AppEndDate = data.AppEndDate;
//WC.AppStartDate = await _db.AppDuration.MaxAsync(i => i.AppStartDate);
//WC.AppEndDate = await _db.AppDuration.MaxAsync(i => i.AppEndDate);
}
ViewBag.IsDurationSet = true;
return View();
}
Test Result:

Related

Preventing developer message to user frontend

I am developing a website with different pages, and among those pages,
I have a contact form that send message to the backend, the email id is unique, I need to display an error message to the front end that if a user enter the email that exist to then it has to display a message the email is taken. How can I go to achieve this. Here is my code
Controller
<?php
namespace App\Http\Controllers\Frontend;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Contact;
use Illuminate\Support\Carbon;
class FrontendPages extends Controller
{
public function About(){
return view('frontend.pages.about');
}//end method
public function Service(){
return view('frontend.pages.services');
}//end method
public function Blog(){
return view('frontend.pages.blog');
}//end method
public function Contact(){
return view('frontend.pages.contact');
}//end method
public function StoreMessage(Request $request){
Contact::insert([
'name' => $request->name,
'email' => $request->email,
'subject' => $request->subject,
'message' => $request->message,
'created_at' =>Carbon::now(),
]);
if ($request->email == 'email') {
return response()->json(['email exist']);
}
$notification = array(
'message' => 'Thank for being in touch we will get back to you soon',
'alert-type' => 'success'
);
return redirect()->back()->with($notification);
}
}
my form
#extends('frontend.main_master')
#section('main')
#php
$footersetup = App\Models\Footer::find(1)->first();
#endphp
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- ======= Breadcrumbs ======= -->
<section id="breadcrumbs" class="breadcrumbs">
<div class="container mt-3">
<div class="d-flex justify-content-between align-items-center">
<h2>Contact</h2>
<ol>
<li>Home</li>
<li>Contact</li>
</ol>
</div>
</div>
</section>
<!-- End Breadcrumbs -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="row mt-5">
<div class="col-lg-4">
<div class="info">
<h4>Location:</h4>
<div class="address">
<i class="bi bi-geo-alt"></i>
{!! $footersetup->address !!}<br /><br />
</div>
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>
{{$footersetup->email}}<br />{{$footersetup->email1}}
</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>{{$footersetup->phone}}</p>
</div>
</div>
</div>
<div class="col-lg-8 mt-5 mt-lg-0">
<form
action="{{route('store.message')}}"
method="post"
role="form"
>
#csrf
<div class="row">
<div class="col-md-6 form-group">
<input
type="text"
name="name"
class="form-control"
id="name"
placeholder="Your Name"
required
/>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input
type="email"
class="form-control"
name="email"
id="email"
placeholder="Your Email"
required
/>
</div>
</div>
<div class="form-group mt-3">
<input
type="text"
class="form-control"
name="subject"
id="subject"
placeholder="Subject"
required
/>
</div>
<div class="form-group mt-3">
<textarea
class="form-control"
name="message"
rows="5"
placeholder="Message"
required
></textarea>
</div>
<div class="my-3">
</div>
<div class="text-center">
<button type="submit" class="btn btn-success">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
#endsection

ASP.NET Core 5.0 MVC : DirectoryNotFoundException While trying to download the file

I am trying to get a file name from database, attach a proper path to it and get it downloaded on my system. Unfortunately I get a DirectoryNotFoundException.
The button I click Is : "Download Id Proof"
An unhandled exception occurred while processing the request.
DirectoryNotFoundException: Could not find a part of the path 'D:\images\Apply\POfId\10157d06-bf72-4ea1-b316-b22ac5feae20.jpg'.
System.IO.FileStream.ValidateFileHandle(SafeFileHandle fileHandle)
Here is my view markup:
#model Derawala.Models.ViewModels.ParentForApply
#{
ViewData["Title"] = "Details";
Layout = "_Layout";
}
<h1>Details</h1>
<form method="post">
<input asp-for="#Model.Apply.PofId" hidden />
<div class="container backgroundWhite pt-4">
<div class="card" style="border:1px solid #000000; ">
#*<div class="card-header bg-dark text-light ml-0 row container" style="border-radius: 0px;">*#
<div class="card-header" style="background-color:black;">
<div class="row">
<div class="col-12 col-md-6 align-self-start">
<h1 class="text-white">#Model.Apply.FirstName #Model.Apply.LastName</h1>
</div>
<div class="col-12 col-md-6 align-self-end">
<h1 class="text-warning">Application Id :#Model.Apply.AppId</h1>
</div>
</div>
</div>
<div class="card-body">
<div class="container rounded p-2">
<div class="row">
<div class="col-12 col-lg-4 p-1 text-center">
<img src="#WC.ImagePath[0]#Model.Apply.Photo" class="rounded w-25" />
</div>
<div class="col-12 col-lg-8">
<div class="row pl-3">
<div class="col-12">
<span class="badge p-3 border" style="background-color:lightpink">#Model.Apply.Qualification</span>
<span class="badge p-3 border" style="background-color:lightskyblue">#Model.Apply.SchType</span>
<h3 class="text-success"></h3>
<p class="text-secondary">#Model.Apply.Description</p>
</div>
</div>
<div class="row pl-3">
<div class="col-12">
Download Id Proof : <button type="submit" class="btn-primary" asp-route-id="#Model.Apply.PofId" asp-action="DownloadFile">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer bg-dark">
<div class="row">
<div class="col-12 col-md-6 ">
<a asp-action="RemoveFromCart" class="btn btn-primary btn-square form-control btn-lg" style="height:50px;">Donate Now <i class="fas fa-hand-holding-medical"></i></a>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-danger form-control btn-lg" style="height:50px;">Delete This Application <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
Here this is the code for the controller method:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> DownloadFile(string id)
{
string DirPath = _webHostEnvironment.WebRootPath;
var objdata = _db.Apply.Where(i => i.PofId == id).FirstOrDefault();
string FileName = objdata.PofId;
var FilePath = Path.Combine(DirPath,WC.ImagePath[1], FileName);
var memory = new MemoryStream();
using (var stream = new FileStream(FilePath,FileMode.Open))
{
await stream.CopyToAsync(memory);
}
memory.Position = 0;
var contentType = "APPLICATION/octet-stream";
return File(memory, contentType, FileName);
}
You can see the error in detail in this screenshot
You can also see that the image and the path actually exist in this screenshot

Problem with pass data to controller - update data

I have a problem with passing data from view to controller... When I was clicked button which sending POST - I have got only data for Category.Name. No subcategories, no ids etc. I am thinking I do something wrong with my view but i am not sure...
I need really help. Thanks for everything comments.
That is my View:
#model AplikacjaFryzjer_v2.Models.Category
#{
ViewData["Title"] = "Edytuj kategorię";
Layout = "~/Views/Shared/_Layout.cshtml";
var SubcategoriesData = (IList<AplikacjaFryzjer_v2.Models.Subcategory>)ViewBag.Subcategories;
}
<h1>Edytuj kategorię</h1>
<form method="post">
<div class="form-group row">
<div class="col">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="col-sm-10 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Name" disabled class="form-control" />
</div>
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<button class="btn btn-primary" type="submit" id="update">Aktualizuj kategorię</button>
</div>
<div class="col">
#if (SubcategoriesData != null)
{
<div class="col-sm-10 col-form-label">
<div id="subcatContainer">
#foreach (var subcategory in SubcategoriesData.ToList())
{
<div class="form-group col-sm-6">
<input asp-for="#subcategory.Name" />
<button class="btn btn-danger" type="button" id="remove">Usuń</button>
<span asp-validation-for="#subcategory.Name" class="text-danger"></span>
</div>
}
</div>
<button type="button" class="btn btn-secondary" id="add">Dodaj podkategorię</button>
</div>
}
else
{
<div id="container" class="col-md-6">
<label id="labelName">Nazwa podkategorii</label>
<input id="inputName" />
<button type="button" class="btn btn-secondary" id="addNew">Dodaj</button>
</div>
}
</div>
</div>
</form>
<script>
$(document).ready(function (e) {
// Variables
var i = #SubcategoriesData.Count()-1;
// Add rows to the form
$("#add").click(function (e) {
var html = '<p /><div class="form-group col-sm-6"><input asp-for="Subcategories[' + i + '].Name" /><button class="btn btn-danger" type="button" id="remove">Usuń</button></div>';
i++;
$("#subcatContainer").append(html).before();
});
// Remove rows from the form
$("#subcatContainer").on('click', '#remove', function (e) {
i--;
$(this).parent('div').remove();
});
// Populate values from the first row
});
</script>
My Actions EditCategory in controller:
[HttpGet]
public ViewResult EditCategory(int Id)
{
var category = _categoriesRepository.GetCategory(Id);
if (category == null)
{
ViewBag.ErrorMessage = $"Kategoria o id = {Id} nie została odnaleziona";
return View("NotFound");
}
ViewBag.Subcategories = category.Subcategories;
return View(category);
}
[HttpPost]
public IActionResult EditCategory(Category category)
{
if (!ModelState.IsValid)
{
// store Subcategories data which has been added
ViewBag.Subcategories = category.Subcategories == null ? new List<Subcategory>() { } : category.Subcategories;
return View("EditCategory");
}
_categoriesRepository.UpdateCategory(category);
return RedirectToAction("ManageCategories");
}
And my object (model):
public class Category
{
public int Id { get; set; }
public string Name { get; set; }
public List<Subcategory> Subcategories {get;set;}
}
I have got only data for Category.Name. No subcategories, no ids etc.
Based on your Category model class, the property Subcategories is defined as List<Subcategory>, to make form data values that browser user post could be automatically bound to this property, you can modify the field of Subcategories related to <input asp-for="#Subcategories[i].Name" /> as below.
#model AplikacjaFryzjer_v2.Models.Category
#{
ViewData["Title"] = "Edytuj kategorię";
Layout = "~/Views/Shared/_Layout.cshtml";
var Subcategories = (IList<AplikacjaFryzjer_v2.Models.Subcategory>)ViewBag.Subcategories;
}
<form method="post">
<div class="form-group row">
#*code for other fields*#
<div class="col">
#if (Subcategories != null)
{
<div class="col-sm-10 col-form-label">
<div id="subcatContainer">
#for (int i = 0; i < Subcategories.Count; i++)
{
<div class="form-group col-sm-6">
<input asp-for="#Subcategories[i].Name" />
<button class="btn btn-danger" type="button" id="remove">Usuń</button>
<span asp-validation-for="#Subcategories[i].Name" class="text-danger"></span>
</div>
}
</div>
<button type="button" class="btn btn-secondary" id="add">Dodaj podkategorię</button>
</div>
}
else
{
<div id="container" class="col-md-6">
<label id="labelName">Nazwa podkategorii</label>
<input id="inputName" />
<button type="button" class="btn btn-secondary" id="addNew">Dodaj</button>
</div>
}
</div>
</div>
</form>
Update:
why new inputs added by jquery not sending to my controller? I have got "" in my code jquery
As I mentioned in comment, please not use tag helper syntax on js client. You can try to manually set name and value attribute for new generated input field(s)
like below.
$(document).ready(function (e) {
// Variables
var i = #Subcategories.Count();
// Add rows to the form
$("#add").click(function (e) {
//var html = '<p /><div class="form-group col-sm-6"><input asp-for="Subcategories[' + i + '].Name" /><button class="btn btn-danger" type="button" id="remove">Usuń</button></div>';
var html = '<p /><div class="form-group col-sm-6"><input name="Subcategories[' + i + '].Name" value="" /><button class="btn btn-danger" type="button" id="remove">Usuń</button></div>';
i++;
$("#subcatContainer").append(html).before();
});
// Remove rows from the form
$("#subcatContainer").on('click', '#remove', function (e) {
i--;
$(this).parent('div').remove();
});
// Populate values from the first row
});
Test Result

create a category filter with vuejs method

I have the following code I am trying to use a function called categorize to filter all of the templates into categories. Each object has a category array. everytime they click on category button a category word is pushed into the selected categories array. if the a template has an category that is in the selected categories array I want to display it. It doesnt work in its current state any ideas?
<div class="col-lg-3 visible-lg-block hidden-md" id="SearchTemplatesLargeContainer">
<form role="form" role="form" onsubmit="return false">
<div class="form-group">
<label for="searchBar">Search</label>
<input v-model="searchQuery" type="text" placeholder="Search Tempates" id="searchBar" autocomplete="off" class="form-control">
</div>
<div class="form-group">
<label>Sort By</label>
<select v-model="sortBy" class="form-control">
<option value="renderTime">Render Time</option>
<option value="az">A-Z</option>
<option value="dateAdded">Newest</option>
</select>
</div>
<div class="form-group">
<h5>Categories</h5>
<div v-for="category in categories" :class="category + 'Button'" v-on:click.prevent="selectCategory(category)" class="btn btn-default categoryButton">
{{category}}
</div>
</div>
</form>
</div>
<!--end lg template menu col-lg-3-->
<!--search templates modal-->
<div class="modal fade" role="dialog" id="searchTemplatesModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h2 class="modal-title">Search Templates</h2>
<!--end .modal-title-->
</div>
<!--end modal-header-->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label>Search</label>
<input v-model="searchQuery" type="text" placeholder="Search Tempates" autocomplete="off" class="form-control">
</div>
<!--.end searchQuery-->
<div class="form-group">
<label>Sort By</label>
<select v-model="sortBy" class="form-control">
<option value="renderTime">Render Time</option>
<option value="az">A-Z</option>
<option value="dateAdded">Newest</option>
</select>
</div>
<!--end sortBy-->
<div class="form-group">
<h5>Categories</h5>
<div v-for="category in categories" :class="category + 'Button'" v-on:click.prevent="selectCategory(category)" class="btn btn-default categoryButton">
{{category}}
</div>
</div>
<!--end categorys-->
</form>
</div>
<!--end .modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" data-dismiss="modal">Search</button>
</div>
<!--end .modal-footer-->
</div>
<!--end .modal-content-->
</div>
<!--end .modal-dialog-->
</div>
<!-- end search templates modal-->
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<h1 class="mainHeading">Creative Engine Templates</h1>
</div>
<div class="row">
<div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in searchResults" class="col-md-4">
<div class="card">
<video muted :src="'mysource/'+template.itemId+'/'+template.thumbName+'.mp4'" controls preload="none" controlsList="nodownload nofullscreen" :poster="'mysource/'+template.itemId+'/'+template.thumbName+'.jpg'" loop="loop"></video>
<div class="card-body">
<p class="card-title">{{template.itemName}}</p>
<!--end card-title-->
<p v-show="displayCount==0" class="card-text">Please create a display to customize</p>
<!--end user has no display card-text-->
<p v-show="displayCount>0" class="card-text">Custom Text, Custom Colors, Upload Logo</p>
<!--end user has display card text-->
<p class="card-text">{{template.renderTime}} minutes</p>
Customize
<!--logged in and has display button-->
<a href="#" v-show="loggedIn==false" class="btn btn-primary btn-block" disabled>Customize</a>
<!--not logged in button-->
Create A Display
</div>
<!--end card-body-->
</div>
<!--end card-->
</div>
<!-- end col-md-4-->
</div>
<!--end row-->
</div>
<!--end col-lg-9 col-md-12 col-sm-12 col-xs-12-->
</div>
<!--end templates app-->
<script>
var app = new Vue({
el: '#templates',
data: {
loggedIn: false,
displayCount:'36',
searchQuery:'',
templateArray: [{"id":"7","itemId":"17520","itemName":"Arrow Bounce","thumbName":"ARROWBOUNCE","dateAdded":"2016-05-20 16:33:42","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/ArrowBounce-Scott\/arrowBounce.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":["LensFlare"]},{"id":"11","itemId":"38752","itemName":"Jitter Zoom Flash","thumbName":"JITTERZOOMFLASH","dateAdded":"2016-05-23 13:49:03","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/JitterZoomFlash-Scott\/JitterZoomFlash.aep","stillImageLocation":"2.66","categoryArray":["Sports"],"keywordArray":["Sparkles","Snow"]},{"id":"12","itemId":"12737","itemName":"Cloth Drop","thumbName":"CLOTHDROP","dateAdded":"2016-05-23 14:11:42","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/ClothDrop-Scott\/cloth drop.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"15","itemId":"73076","itemName":"Colorful Trans","thumbName":"COLORFULIMAGETRANS","dateAdded":"2016-05-27 10:16:56","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/ColorfulImageTrans-Scott\/ColorfulImageTrans.aep","stillImageLocation":"12.90","categoryArray":[],"keywordArray":["Sparkles","Water"]},{"id":"16","itemId":"18488","itemName":"Convex ½ Circle","thumbName":"CONVEXHALFCIRCLE","dateAdded":"2016-05-27 10:38:20","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/convexHalfCircle-Scott\/convex half circle.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"17","itemId":"67039","itemName":"Flag Swap","thumbName":"FLAGBACKSWAP","dateAdded":"2016-06-01 15:34:22","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/FlagBackSwap-Scott\/FlagBackSwap.aep","stillImageLocation":"5.83","categoryArray":[],"keywordArray":[]},{"id":"31","itemId":"70006","itemName":"Flag Raise","thumbName":"FLAGRAISE","dateAdded":"2016-06-03 11:13:37","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/FlagRaise-Scott\/flag.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"32","itemId":"58759","itemName":"Logo Dust Poof","thumbName":"LOGODUSTPOOF","dateAdded":"2016-06-03 11:25:34","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/LogoDustPoof-Scott\/LogoDustPoof.aep","stillImageLocation":"6.23","categoryArray":[],"keywordArray":[]},{"id":"33","itemId":"58967","itemName":"Flag Wave (Loop)","thumbName":"FLAGWAVE","dateAdded":"2016-06-03 11:35:49","renderTime":"75","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/FlagWave-Scott\/FlagWave.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"34","itemId":"65288","itemName":"Logo Splash One","thumbName":"LOGOSPLASHONE","dateAdded":"2016-06-03 15:34:19","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/LogoSplashOne-Scott\/LogoSplashOne.aep","stillImageLocation":"2.70","categoryArray":[],"keywordArray":[]},{"id":"35","itemId":"91246","itemName":"Metal Sparks","thumbName":"METALSPARKS","dateAdded":"2016-06-06 10:58:29","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/MetalSparks-Scott\/MetalSparks.aep","stillImageLocation":"4.63","categoryArray":[],"keywordArray":[]},{"id":"36","itemId":"57489","itemName":"Middle Stripe","thumbName":"MIDDLESTRIPEABA","dateAdded":"2016-06-06 12:25:41","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/MiddleStripe-Scott\/middleStripeABA.aep","stillImageLocation":"6.80","categoryArray":[],"keywordArray":[]},{"id":"37","itemId":"38402","itemName":"Water One","thumbName":"WATERONE","dateAdded":"2016-06-07 09:10:32","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/waterOne-Scott\/waterOne.aep","stillImageLocation":"8.83","categoryArray":[],"keywordArray":[]},{"id":"39","itemId":"81031","itemName":"Oval Text Flip","thumbName":"OVALTEXTFLIP","dateAdded":"2016-05-07 09:10:32","renderTime":"150","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/OvalTextFlip-Scott\/OvalTextFlip.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"40","itemId":"55143","itemName":"Close Up Text","thumbName":"CLOSEUPTEXT","dateAdded":"2016-07-05 09:10:32","renderTime":"85","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/CloseUpText-Scott\/CloseUpText\/CloseUpText.aep","stillImageLocation":"9.03","categoryArray":[],"keywordArray":[]},{"id":"41","itemId":"54335","itemName":"Electric Text Spin","thumbName":"ELECTRICTEXTSPIN","dateAdded":"2016-07-13 09:10:32","renderTime":"60","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/ElectricTextSpin-Scott\/ElectricTextSpin\/ElectricTextSpin.aep","stillImageLocation":"1.47","categoryArray":[],"keywordArray":[]},{"id":"42","itemId":"23761","itemName":"Digital Glitch","thumbName":"DIGITALGLITCH","dateAdded":"2016-09-19 09:10:32","renderTime":"60","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/DigitalGlitch-Scott\/DigitalGlitch.aep","stillImageLocation":"3.43","categoryArray":["Retail"],"keywordArray":[]},{"id":"43","itemId":"56465","itemName":"Takeover","thumbName":"TAKEOVER","dateAdded":"2016-09-30 14:10:32","renderTime":"80","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/TakeOver-Scott\/TakeoverProject\/takeoverproject.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"44","itemId":"17127","itemName":"Fire One","thumbName":"FIREONE","dateAdded":"2016-11-04 14:10:32","renderTime":"25","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/FireOne-Scott\/FireOne.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"53","itemId":"61617","itemName":"City Spin","thumbName":"CITYSPIN","dateAdded":"2016-11-09 14:17:15","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2016\/CitySpin-Scott\/cityspin.aep","stillImageLocation":"8.933","categoryArray":["Church"],"keywordArray":[]},{"id":"56","itemId":"15528","itemName":"Magic Colors","thumbName":"MAGICCOLORS","dateAdded":"2016-11-10 13:10:26","renderTime":"30","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/MagicColors-Scott\/MagicColors.aep","stillImageLocation":"3.966","categoryArray":[],"keywordArray":[]},{"id":"61","itemId":"59239","itemName":"Quick and Simple","thumbName":"QUICKNSIMPLE","dateAdded":"2016-11-14 11:42:09","renderTime":"15","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/QuickNSimple-Scott\/QuickNSimple.aep","stillImageLocation":"2.033","categoryArray":[],"keywordArray":[]},{"id":"62","itemId":"82460","itemName":"Fast Blast","thumbName":"FASTBLAST","dateAdded":"2016-11-22 10:24:48","renderTime":"30","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/FastBlast-Scott\/FastBlast.aep","stillImageLocation":"9.666","categoryArray":[],"keywordArray":[]},{"id":"63","itemId":"83530","itemName":"Tunnel Spin","thumbName":"TUNNELSPIN","dateAdded":"2016-12-02 13:09:06","renderTime":"20","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/tunnelSpin-Scott\/tunnelSpin.aep","stillImageLocation":"2.9","categoryArray":[],"keywordArray":[]},{"id":"64","itemId":"94148","itemName":"Sparkle Splash","thumbName":"SPARKLESPLASH","dateAdded":"2016-12-20 11:23:26","renderTime":"45","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2016\/SparkleSplash-Scott\/SparkleSplash.aep","stillImageLocation":"6.1","categoryArray":[],"keywordArray":[]},{"id":"69","itemId":"98640","itemName":"Gold Bling","thumbName":"GOLDBLING","dateAdded":"2017-01-10 08:16:41","renderTime":"30","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/GoldBling-Joe\/GoldBling.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"72","itemId":"94169","itemName":"Top Racer","thumbName":"TOPRACER","dateAdded":"2017-02-15 09:46:14","renderTime":"30","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/TopRacer-Scott\/TopRacer.aep","stillImageLocation":"7.833","categoryArray":[],"keywordArray":[]},{"id":"73","itemId":"55871","itemName":"Desert Sand","thumbName":"DESERTSAND","dateAdded":"2017-02-15 14:04:49","renderTime":"45","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/DesertSand-Scott\/DesertSand.aep","stillImageLocation":"10.46","categoryArray":[],"keywordArray":[]},{"id":"76","itemId":"18897","itemName":"Electric Storm","thumbName":"ELECTRICSTORM","dateAdded":"2017-02-23 12:43:08","renderTime":"45","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/ElectricStorm-Scott\/ElectricStorm.aep","stillImageLocation":"4.333","categoryArray":[],"keywordArray":[]},{"id":"78","itemId":"24052","itemName":"Court Smash","thumbName":"COURTSMASH","dateAdded":"2016-06-03 12:03:48","renderTime":"90","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/CourtSmash-Scott\/CourtSmash.aep","stillImageLocation":"5.933","categoryArray":[],"keywordArray":[]},{"id":"81","itemId":"43553","itemName":"Tile Flip","thumbName":"TILEFLIP","dateAdded":"2017-04-25 16:40:41","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/TileFlip-Chris\/TileFlip_Final\/TileFlip_Final.aep","stillImageLocation":"5","categoryArray":[],"keywordArray":[]},{"id":"88","itemId":"94677","itemName":"NEON LIGHTS","thumbName":"NEONLIGHTS","dateAdded":"2017-04-28 10:06:23","renderTime":"45","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/NEONLIGHTS-Joe\/NeonLights.aep","stillImageLocation":"2.53","categoryArray":[],"keywordArray":[]},{"id":"89","itemId":"64305","itemName":"Engine (Loop)","thumbName":"ENGINE","dateAdded":"2017-05-15 11:37:07","renderTime":"60","tested":"1","projectPath":"O:\/Projects\/Generics\/CreativeEngine\/2017\/Engine-Scott\/Engine.aep","stillImageLocation":"4.67","categoryArray":[],"keywordArray":[]},{"id":"90","itemId":"11287","itemName":"Energy Core","thumbName":"ENERGYCORE","dateAdded":"2017-05-22 13:08:40","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/EnergyCore-Scott\/EnergyCore.aep","stillImageLocation":"6.73","categoryArray":[],"keywordArray":[]},{"id":"91","itemId":"48745","itemName":"Football Helmet","thumbName":"FOOTBALLHELMET","dateAdded":"2017-07-03 16:09:42","renderTime":"120","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/FootballHelmet-Scott\/FootballHelmet.aep","stillImageLocation":"7","categoryArray":[],"keywordArray":[]},{"id":"92","itemId":"85515","itemName":"Light Shine","thumbName":"LIGHTSHINE","dateAdded":"2017-08-18 14:09:50","renderTime":"30","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/LightShine-Scott\/LightShine.aep","stillImageLocation":"2","categoryArray":[],"keywordArray":[]},{"id":"93","itemId":"61876","itemName":"Baseball Dirt","thumbName":"BASEBALLDIRT","dateAdded":"2017-08-31 10:31:22","renderTime":"40","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/BaseballDirt-Scott\/BaseballDirt.aep","stillImageLocation":"7.27","categoryArray":[],"keywordArray":[]},{"id":"94","itemId":"48066","itemName":"Spooky","thumbName":"SPOOKY","dateAdded":"2017-09-01 13:58:36","renderTime":"15","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/Spooky-Jake\/Spooky.aep","stillImageLocation":"2","categoryArray":["Sports"],"keywordArray":[]},{"id":"95","itemId":"33584","itemName":"Get Loud","thumbName":"GETLOUD","dateAdded":"2017-09-07 11:58:02","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/GetLoud-Scott\/GetLoud.aep","stillImageLocation":"1.77","categoryArray":[],"keywordArray":[]},{"id":"96","itemId":"21713","itemName":"STAR BURST","thumbName":"STARBURST","dateAdded":"2017-10-19 18:20:29","renderTime":"15","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/StarBurst-Joe\/StarBurst.aep","stillImageLocation":"0","categoryArray":[],"keywordArray":[]},{"id":"97","itemId":"76554","itemName":"Magic Twirl","thumbName":"MAGICFINAL","dateAdded":"2017-10-26 11:19:52","renderTime":"20","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/Magic-Lillie\/Magic.aep","stillImageLocation":"825","categoryArray":[],"keywordArray":[]},{"id":"98","itemId":"64452","itemName":"Sports Car","thumbName":"SPORTSCAR","dateAdded":"2017-10-27 10:26:32","renderTime":"60","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/SportsCar-Scott\/SportsCar.aep","stillImageLocation":"14.77","categoryArray":[],"keywordArray":[]},{"id":"99","itemId":"15074","itemName":"Ice Logo","thumbName":"ICELOGO","dateAdded":"2017-11-01 11:53:48","renderTime":"45","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/IceLogo-Scott\/IceLogo.aep","stillImageLocation":"9.33","categoryArray":[],"keywordArray":["LensFlare"]},{"id":"100","itemId":"95033","itemName":"Hot Air Balloon","thumbName":"BALLOON","dateAdded":"2017-11-02 08:10:22","renderTime":"10","tested":"1","projectPath":"M:\/Projects\/Generics\/CreativeEngine\/2017\/Balloon-Lillie\/Balloon.aep","stillImageLocation":"567","categoryArray":[],"keywordArray":[]},{"id":"243","itemId":"f0adeb21cfbfc7e1894debeef4cc6e22","itemName":"testingCrap","thumbName":"TESTINGCRAP","dateAdded":"2018-10-08 18:06:48","renderTime":"4","tested":"0","projectPath":"M:\/Projects\/Generics\/uploads\/testLocation","stillImageLocation":"0.13","categoryArray":["Sports","Holiday"],"keywordArray":["LensFlare"]}],
filteredTemplateArray: [],
selectedCategories: [],
keywords: ["LensFlare","Snow","Water","Sparkles","Sky","Plants"],
selectedKeywords: [],
sortBy: ''
},
created: function(){
this.filteredTemplateArray=this.templateArray;
},
computed: {
searchResults: function(){
return this.filteredTemplateArray.filter((template)=>{
return template.itemName.toLowerCase().includes(this.searchQuery.toLowerCase());
})
}
},
methods: {
selectCategory: function(category) {
var categoryButton = $('.' + category + 'Button');
categoryButton.toggleClass('categoryButtonSelected');
if(this.selectedCategories.includes(category)){
var array = [];
for(var i = 0; i < this.selectedCategories.length; i++) {
if(this.selectedCategories[i] != category) {
array.push(this.selectedCategories[i]);
}
}
this.selectedCategories = array;
} else {
this.selectedCategories.push(category);
}
this.categorize();
},
categorize: function(){
return this.filteredTemplateArray.filter((template)=>{
return template.categoryArray.inArray(this.selectedCategories);
})
}
}
});
<script>
I am not too sure I understand the question, but.
Try creating a method for checking if a category is in the selectedCategories array
methods: {
isInSelectedCategories(category) {
return this.selectedCategories.includes(category)
}
...
}
In your template, you can do this check like so:
v-if="isInSelectedCategories(template.category)"
<!-- end search templates modal-->
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<h1 class="mainHeading">Creative Engine Templates</h1>
</div>
<div class="row">
<div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in searchResults" v-if="isInSelectedCategories(template.category)" class="col-md-4">
<div class="card">
<video muted :src="'mysource/'+template.itemId+'/'+template.thumbName+'.mp4'" controls preload="none" controlsList="nodownload nofullscreen" :poster="'mysource/'+template.itemId+'/'+template.thumbName+'.jpg'" loop="loop"></video>
<div class="card-body">
<p class="card-title">{{template.itemName}}</p>
<!--end card-title-->
<p v-show="displayCount==0" class="card-text">Please create a display to customize</p>
<!--end user has no display card-text-->
<p v-show="displayCount>0" class="card-text">Custom Text, Custom Colors, Upload Logo</p>
<!--end user has display card text-->
<p class="card-text">{{template.renderTime}} minutes</p>
Customize
<!--logged in and has display button-->
<a href="#" v-show="loggedIn==false" class="btn btn-primary btn-block" disabled>Customize</a>
<!--not logged in button-->
Create A Display
</div>
<!--end card-body-->
</div>
<!--end card-->
</div>
<!-- end col-md-4-->
</div>
create a watcher that watches selectedCategories and when it changes run a method that filters out the duplicates and sets filtered categories back to the original array when the selectedCategories.length==0. This creates a category filter that counts up. for instance if sports and holidays are checked it will show only all items in sports and all items in holidays which seems to work better than counting down or showing the ones that only exist in both. I use app instead of this as its the variable i called my vue instance and because when you get deep into a function this does not always mean the app.
watch: {
selectedCategories(){
this.categoryFilter();
},
sortBy(){
this.sortTemplatesBy();
}
},
methods: {
sortTemplatesBy: function(){
if(this.sortBy == "az") {
this.filteredTemplateArray.sort(function(a,b) {
if(a.itemName > b.itemName) {
return 1;
}
if(a.itemName < b.itemName) {
return -1;
}
return 0;
});
}
if(this.sortBy == "dateAdded") {
this.filteredTemplateArray.sort(function(a,b) {
if(a.dateAdded < b.dateAdded) {
return 1;
}
if(a.dateAdded > b.dateAdded) {
return -1;
}
return 0;
});
}
if(this.sortBy == "renderTime") {
this.filteredTemplateArray.sort(function(a,b) {
return parseInt(a.renderTime) - parseInt(b.renderTime);
});
}
},
categoryFilter: function(){
if(app.selectedCategories.length!=0){
app.filteredTemplateArray=[];
var templateArray = app.templateArray;
for(i=0; i<app.selectedCategories.length; i++){
var filtered=templateArray.filter(function(template){
var currentCategory=app.selectedCategories[i];
console.log("this is current category"+currentCategory+"end currentCategory");
var returnValue=template.categoryArray.includes(currentCategory);
console.log("this is i"+i+"end i");
console.log("this is return value"+returnValue+"end return value");
return returnValue;
});
console.log(filtered);
app.filteredTemplateArray=app.filteredTemplateArray.concat(filtered);
}
var uniqueArray=[];
var allResultsArray=app.filteredTemplateArray;
for(j=0; j<allResultsArray.length; j++){
if(uniqueArray.indexOf(allResultsArray[j]) == -1){
uniqueArray.push(allResultsArray[j])
}
}
app.filteredTemplateArray=uniqueArray;
} else {app.filteredTemplateArray=app.templateArray;}
this.sortTemplatesBy();
}
}

Vue.js not updating template when changing child objects

I'm extending laravel spark and wanted to try to validate registration before actually sending it off.
All data is handled nicely and correctly from the server but the errors do not pop-up.
The code being used for validation is as following:
module.exports = {
...
methods: {
...
validate(field, value) {
var formData = {
field: field,
value: value
};
var form = new SparkForm(formData);
Spark.post('/register_validate', form).then(response => {
this.registerForm.addSuccess(field);
}).catch(errors => {
this.registerForm.addError(field, errors[field]);
});
}
}
};
After, i extended SparkForm and added these methods (successes is just a copy of errors, used to display validation success messages):
/**
* SparkForm helper class. Used to set common properties on all forms.
*/
window.SparkForm = function (data) {
...
this.addError = function(field, errors) {
form.successes.remove(field);
form.errors.add(field, errors);
},
this.addSuccess = function(field) {
form.errors.remove(field);
form.successes.add(field, true);
}
};
And finally i added some methods on the SparkFormErrors.
/**
* Spark form error collection class.
*/
window.SparkFormErrors = function () {
...
this.add = function(field, errors) {
this.errors[field] = errors;
};
this.remove = function(field) {
delete this.errors[field];
}
};
In the console no errors are shown and in the network tab i can see the correct messages coming true, also when i add a console log in for example the response callback i can see the actual errors or success messages. But they are not drawn on screen.
For completeness i'll include the important content of the template blade file:
#extends('spark::layouts.app')
#section('content')
<spark-register-stripe inline-template>
<!-- Basic Profile -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
{{ trans('auth.register.title') }}
</div>
<div class="panel-body">
<!-- Generic Error Message -->
<div class="alert alert-danger" v-if="registerForm.errors.has('form')">
#{{ registerForm.errors.get('form') }}
</div>
<!-- Registration Form -->
<form class="form-horizontal" role="form">
<!-- Name -->
<div class="form-group" :class="{'has-error': registerForm.errors.has('name')}">
<label class="col-md-4 control-label">{{ trans('user.name') }}</label>
<div class="col-md-6">
<input type="name" class="form-control" name="name" v-model="registerForm.name" autofocus #blur="validate('name', registerForm.name)">
<span class="help-block" v-show="registerForm.errors.has('name')">
#{{ registerForm.errors.get('name') }}
</span>
</div>
</div>
<!-- E-Mail Address -->
<div class="form-group" :class="{'has-error': registerForm.errors.has('email')}">
<label class="col-md-4 control-label">{{ trans('user.email') }}</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" v-model="registerForm.email" #blur="validate('email', registerForm.email)">
<span class="help-block" v-show="registerForm.errors.has('email')">
#{{ registerForm.errors.get('email') }}
</span>
</div>
</div>
<!-- Password -->
<div class="form-group" :class="{'has-error': registerForm.errors.has('password')}">
<label class="col-md-4 control-label">{{ trans('user.password') }}</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password" v-model="registerForm.password" #blur="validate('password', registerForm.password)">
<span class="help-block" v-show="registerForm.errors.has('password')">
#{{ registerForm.errors.get('password') }}
</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button class="btn btn-primary" #click.prevent="register" :disabled="registerForm.busy">
<span v-if="registerForm.busy">
<i class="fa fa-btn fa-spinner fa-spin"></i>{{ trans('auth.register.submitting') }}
</span>
<span v-else>
<i class="fa fa-btn fa-check-circle"></i>{{ trans('auth.register.submit') }}
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</spark-register-stripe>
#endsection
Any bright mind seeing what i'm missing/forgetting?