We Keep Coding

Vue js 2 post data to JSON object

First time Vue js user, trying to learn by building a small blog/article system where a user can add a article and it'll show on the page (and store in the json)
my code so far:
I have a Json array I can display.
I have a form I can add name and surname to and have it display on the page.
Next:
I wish to click my button and have the new name and surname added to my json object in my file.
Question:
how can I click on my button and have this add to my users data array ?
My code:
Hello.vue
<template>
<div class="justify-content-center align-items-center container ">
<div class="row">
<div class="col-12 align-content-center">
<h2>Total articles: {{ users.length }}</h2>
<ul class="list-group">
<li class="list-group-item" v-for="user in users">
<div class="d-flex w-100 justify-content-between">
<h5>{{user.firstname}} {{user.lastname}}</h5>
<small>3 days ago (todo)</small>
</div>
<div class="text-justify">
<p>artical body test here (todo)</p>
<small>Author (todo)</small>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 align-content-center">
<form v-on:submit="sub" action="#" method="post">
<div class="form-group">
<div class="col-6">
<label>Add first name:</label>
<b-form-input type="text" v-model="input_val_firstName" placeholder="Enter your first name"></b-form-input>
</div>
<div class="col-6">
<label>Add second name:</label>
<b-form-input type="text" v-model="input_val_secondName" placeholder="Enter your second name"></b-form-input>
</div>
<div class="col-6">
<button type="submit" class="btn btn-primary">Add article</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-12 align-content-center">
<h2>Preview article</h2>
<strong>Name:</strong>
<span v-text="input_val_firstName"></span>
<span v-text="input_val_secondName"></span>
<h3>log:{{log}}</h3>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
},
name: 'Hello',
data() {
return {
msg: 'Display articles',
secondmsg: 'This is a blog built in Vue.js.',
log: "",
users: [
{
firstname: 'Sebastian',
lastname: 'Eschweiler'
},
{
firstname: 'Bill',
lastname: 'Smith'
},
{
firstname: 'Tom',
lastname: 'bull'
},
{
firstname: 'John',
lastname: 'Porter'
}
],
input_val_firstName: '',
input_val_secondName: '',
counter: 0
}
}
}
</script>

Just add a method to add the user and this should work:
addUser: function() {
this.users.push({
firstname: this.input_val_firstName,
lastname: this.input_val_secondName
})
// assuming you'd like to clear the input-box fields after adding the user
this.input_val_firstName = ''
this.input_val_secondName = ''
}

PrimeNg ConfirmDialog design messed up, CSS not applying

Template :
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"></p-confirmDialog>
<button type="button" class="btn btn-primary" (click)="confirm()" >Save</button>
Component:
confirm() {
console.log('confirm?');
this.confirmationService.confirm({
message: 'Are you sure that you want to update?',
accept: () => {
console.log('update clicked');
}
});
}
Output display:
Is there any css file etc that I need to include?
Template(full):
<!---------------- Meta and Title ---------------->
<meta charset="utf-8">
<title>Solid Waste Management System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="tables-basic" data-spy="scroll" data-target="#nav-spy" data-offset="300">
<!-- -------------- Body Wrap -------------- -->
<div id="main">
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"></p-confirmDialog>
<!-- -------------- Topbar -------------- -->
<header id="topbar" class="alt">
<div class="topbar-left">
<ol class="breadcrumb">
<li class="breadcrumb-icon">
<a href="#">
<span class="fa fa-eye"></span>
</a>
</li>
<li class="breadcrumb-active">
Organizational User
</li>
</ol>
</div>
<div class="topbar-right">
<a class="btn btn-primary btn-sm" href="Edit.html">
<i class="fa fa-edit"></i> Edit
</a>
<a class="btn btn-dark btn-sm" href="UserList.html">
<i class="fa fa-arrow-left"></i> Back
</a>
</div>
</header>
<!-- -------------- /Topbar -------------- -->
<!-- -------------- Content -------------- -->
<section id="content" class="table-layout animated fadeIn">
<!-- -------------- Column Center -------------- -->
<div class="chute chute-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-visible p10">
<div class="panel-body pn mn allcp-form theme-primary">
<form id="form-order" (ngSubmit)="onSubmit(f)" #f="ngForm">
<h6>OrgUser</h6>
<div class="section row ">
</div>
<!-- -------------- /section -------------- -->
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="userid">User ID: </label>
<p-autoComplete (ngModelChange)="orguser.userid = $event" class="ui-autocomplete autocomplete" [suggestions]="results" (completeMethod)="search($event)"
(onSelect)="onSelect($event)" (onBlur)="onBlur($event.target.value)" field="userid"></p-autoComplete>
<input type="hidden" name="userid" [ngModel]="orguser?.userid">
</div>
<div class="col-md-6 ph10 mb5">
<label for="perid">Personnel ID:</label>
<input type="text" class="form-control" [ngModel]="orguser?.perid" (ngModelChange)="orguser.perid = $event" name="perid"
id="perid">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="Password">Password:</label>
<input type="text" class="form-control" [ngModel]="orguser?.password" (ngModelChange)="orguser.password = $event" name="password"
id="password">
</div>
<div class="col-md-6 ph10 mb5">
<label for="fullname">Name:</label>
<input type="text" class="form-control" name="fullname" disabled [ngModel]="orguser?.perfullname" (ngModelChange)="orguser.perfullname = $event"
id="fullname">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="type">CreatedOn:</label>
<input type="text" class="form-control" name="createdon" disabled [ngModel]="orguser?.createdon" (ngModelChange)="orguser.createdon = $event"
id="createdon">
</div>
<div class="col-md-6 ph10 mb5 ">
<label for="CreatedBy ">CreatedBy:</label>
<input type="text" class="form-control" name="createdby" disabled [ngModel]="orguser?.createdby" (ngModelChange)="orguser.createdby = $event"
[(ngModel)]="orguser.createdby" id="createdby">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="Deletedby">Deleted By:</label>
<input type="text" class="form-control" disabled name="Deletedby" id="Deletedby">
<div class="col-md-6 ph10 mb5">
<label for="isactive">IsActive:</label>
<input type="checkbox" id="isactive" [ngModel]="orguser?.isactive" (ngModelChange)="orguser.isactive = $event" name="isactive">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="isdeleted">Is Deleted:</label>
<input type="checkbox" id="isdeleted" [ngModel]="orguser?.isdeleted" (ngModelChange)="orguser.isdeleted = $event" name="isdeleted">
</div>
</div>
</div>
<!-- -------------- /section -------------- -->
<hr>
<!-- -------------- /section -------------- -->
<div class="section text-right mb10 ">
<button type="button" class="btn btn-primary" (click)="confirm()">Save</button>
</div>
<!-- -------------- /Panel Body -------------- -->
</form>
</div>
</div>
</div>
</div>
</div>
<!-- -------------- /Column Center -------------- -->
</section>
<!-- -------------- /Content -------------- -->
</div>
</div>
Componenet(full):
import { Component, OnInit, ViewChild } from '#angular/core';
import { orguser } from '../../Models/orguser';
import { PersonnelService } from '../../services/personnel.service';
import { OrguserService } from '../../services/orguser.service';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {ConfirmationService} from 'primeng/api';
#Component({
selector: 'app-orguseraddedit',
templateUrl: './orguseraddedit.component.html',
styleUrls: ['./orguseraddedit.component.css'],
})
export class OrguseraddeditComponent implements OnInit {
orguser: orguser = new orguser();
val: any;
results: any[];
constructor(private _PersonnelService: PersonnelService, private _OrguserService: OrguserService,private confirmationService: ConfirmationService) {
}
confirm() {
console.log('confirm?');
this.confirmationService.confirm({
message: 'Are you sure that you want to update?',
accept: () => {
console.log('update clicked');
}
});
}
confirm1() {
this.confirmationService.confirm({
message: 'Are you sure that you want to Add?',
accept: () => {
console.log('add clicked');
},
key:"add"
});
}
search(event) {
this._OrguserService.GetOrgUsersForAutocomplete(event.query)
.subscribe((userdata: any[]) => { this.results = userdata;console.log('xxxx'); console.log(this.results); }, (error) => {
//this.statusMessage = 'Problem with service. Please try again.'
console.error(error);
});
}
handleDropdown(event) {
console.log(event.query);
//event.query = current value in input field
}
ngOnInit() {
//this.orguser=null;
}
onBlur(value){
this._OrguserService.selectOrgUsersById(value)
.subscribe((userdata: any[]) => { this.orguser = userdata[0]; }, (error) => {
console.error(error);
});
}
onSelect(value) {
this.getuser(value.userid);
}
getuser(value){
this._OrguserService.selectOrgUsersById(value)
.subscribe((userdata: any[]) => { this.orguser = userdata[0]; console.log(this.orguser); }, (error) => {
console.error(error);
});
}
onSubmit(f) {
this._OrguserService.addupdateOrguser(f.value)
.subscribe((res: any) => {
console.log(res);
this.orguser = res;
{ console.log('success'); this.getuser(f.value.userid); };
}, (error) => {
console.error(error);
});
}
}
interface IAutoCompleteItem {
value: any;
text: string;
markup?: string;
isFocus?: boolean;
}
After removing all the stylesheet references and everything else on the template this is what I am getting:

I am not sure what you exactly wrong. But I'Ll give the proper way to use primeng confirm dialog box. You can get what you missing from that
First you need import ConfirmationService from primeng package
import { ConfirmationService} from 'primeng/primeng';
Then you should inject this via constructor like
constructor(private confirmationService: ConfirmationService) { }
And use the below code while open confirmation dialog box
this.confirmationService.confirm({
message: 'Are you sure to delete this?',
icon: 'fa fa-question-circle',
header: 'Delete Confirmation',
accept: () => {
// do accept criteria
}
},
reject: () => {
//close the dialogue
}
});
And the HTML code Could be
<p-confirmDialog width="500"></p-confirmDialog>
EDIT
While looking your code, You are missing to assign any value for Confirmation object in header="Confirmation".So please remove header="Confirmation" and add that in confirmationservice parameter. also remove appendTo="body". Please try this and let me know

Finally, I have figured out what I was missing.
<link rel="stylesheet" href="https://unpkg.com/primeng#4.1.0/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng#4.1.0/resources/primeng.min.css" />
Since I am new to angular I am not sure about the correct way to reference the local files in node_modules so I have used cdn.
It working.

Vue doesn't render content in my component's mustache templates ( {{}} )

I'm already banging my head against this problem the whole day. Following problem, that my mustache bracer components don't get rendered on my site. I just get the unrendered components in bracers as output.
//app.js
//
import Vue from 'vue'
new Vue({
//We want to target the div with an id of 'events'
el: '#events',
//Here we can register any values or collections that hold data
//for the application
data: {
event: {
name: '',
description: '',
date: ''
},
events: []
},
// Anything within the ready function will run when the application loads
ready: function() {
//When application loads, we want to call the method that initializies
//some data
this.fetchEvents();
},
// Methods we want to use in our application are registered here
methods: {
//We dedicate a method to retrieving and setting some data
fetchEvents: function() {
// body...
var events = [{
id: 1,
name: 'TIFF',
description: 'Toronto International Film Festival',
date: '2015-09-10'
},
{
id: 2,
name: 'The Martian Premiere',
description: 'The Martian comes to theatres',
date: '2015-10-02'
},
{
id: 3,
name: 'SXSW',
description: 'Music, film and interactive festival in Austin, TX'
date: '2016-03-11'
}
];
//Set is a convenience method provided by Vue that is similar to pushing
//data onto an array
this.$set('events', events);
},
//Adds an event to the existing events array
addEvent: function() {
if (this.event.name) {
this.events.push(this.event);
this.event = {
name: '',
description: '',
date: ''
};
}
}
deleteEvent: function(index) {
if (confirm("Are you sure you want to delete this Event?")) {
//$remove is a Vue convenience method similar to splice
this.events.$remove(index);
}
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- navigation bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i>Vue Events Bulletin</a>
</div>
</nav>
<!-- main body of our application -->
<div class="container" id="events">
<!-- add an event form -->
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on:click="addEvent()">Submit</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item" v-repeat="event in events">
<h4 class="list-group-item-heading">
<i class="glyphicon glyphicon-bullhorn"></i> {{ event.name }}
</h4>
<h5>
<i class="glyphicon glyphicon-calender" v-if="event.date"></i> {{ event.date }}
</h5>
<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
<button class="btn btn-xs btn-danger" v-on:click="deleteEvent($index)">Delete</button>
</a>
</div>
</div>
</div>
<!-- JS -->
<!--<script src="node_modules/vue/dist/vue.js"></script> -->
<!--<script src="node_modules/vue-resource/dist/vue-resource.js"><!--</script> -->
<!--<script src="app.js"></script> -->
</body>

I was able to get the App running! This is the working Code in case someone struggles with something similar!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bulletin Board</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> -->
<!-- <meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i>Vue Events Bulletin</a>
</div>
</nav>
<!-- main body of our application -->
<div class="container" id="app">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on:click="addEvent()">Submit</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item" v-for="event in events">
<h4 class="list-group-item-heading">
<i class="glyphicon glyphicon-bullhorn"></i>
{{ event.name }}
</h4>
<h5>
<i class="glyphicon glyphicon-calender" v-if="event.date"></i>
{{ event.date }}
</h5>
<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
<button class="btn btn-xs btn-danger" v-on:click="deleteEvent($index)">Delete</button>
</a>
</div>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
And the app.js
new Vue({
el: '#app',
data: {
event: {
name: '',
description: '',
date: ''
},
events: []
},
mounted: function() {
//alert('mounted')
this.fetchEvents();
},
methods: {
fetchEvents: function() {
var events = [{
id: 1,
name: 'TIFF',
description: 'Toronto International Film Festival',
date: '2015-09-10'
},
{
id: 2,
name: 'The Martian Premiere',
description: 'The Martian comes to theatres',
date: '2015-10-02'
},
{
id: 3,
name: 'SXSW',
description: 'Music, film and interactive festival in Austin, TX',
date: '2016-03-11'
}
];
this.events = events;
},
//Adds an event to the existing events array
addEvent: function() {
if (this.event.name) {
this.events.push(this.event);
this.event = {
name: '',
description: '',
date: ''
};
}
},
deleteEvent: function (index) {
if (confirm('Are you sure you want to delete this event?')) {
this.events.splice(index, 1);
}
// body...
}
}
});

AngularJS ng-repeat directives is not working on my EventController.js

I was trying to add session details under address and date. But ng-repeat is working but its not displaying any details under sessions section. Its not giving me any error. Can anyone please check my codes and let me know what`s missing.
.....app.js.....
'use strict';
var eventsApp = angular.module('eventsApp', []);
'use strict';
eventsApp.controller('EventController',
function EventController($scope){
$scope.event = {
name: 'Angular Event App',
date: '04/02/2017',
time: '3.09 am',
location: {
address: 'Google Headquaters',
city: 'Mountain View',
Province: 'CA'
},
imageUrl: '/img/angularjs-logo.png',
sessions: [
{
name: 'Directive Masterclass'
},
{
name: 'Scope for fun and profit'
},
{
name: 'well Behaved Controllers'
}
]
};
});
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore-1.4.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/EventController.js"></script>
</head>
<body>
<div class="container">
<div class="navbar-inner">
<ul class="nav">
</ul>
</div>
<div ng-controller="EventController" style="padding-left:20px; padding-right:20px">
<img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
<div class="row">
<div class="span1">
<h2> {{event.name}}</h2>
</div>
</div>
<div class="row">
<div class="span2">
<div><strong>Date: </strong> {{event.date}}</div>
<div><strong>Time: </strong> {{event.time}}</div>
</div>
<div class="span3">
<address>
<strong> Address: </strong><br>
{{event.location.address}}<br>
{{event.location.city}}, {{event.location.province}}
</address>
</div>
</div>
<h3>Sessions</h3>
<ul class="thumbnails">
<li ng-repeat="session in event.sessions" ></li>
<div class="row session">
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>

you need to add the div content inside the li tag
change this
<li ng-repeat="session in event.sessions" ></li>
<div class="row session">
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
</div>
</div>
to this
<li ng-repeat="session in event.sessions">
<div class="row session">
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
</div>
</div>
</li>
Demo

The ending tag for the li element is before where you are referencing the item from the Ng-repeat (likely a typo). I'd update the HTML to the following:
<li ng-repeat="session in event.sessions">
<div class="row session">
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
</div>
</div>
</li>

Ng-repeat not working expression shows and then disappears immediately

I am creating a list of users on this page using ng-repeat. When the page is refreshed the expression that is supposed to appear shows up for a split second and then disappears without any trace of the object that should be repeated. This is the code
<div class="row" data-ng-controller="createUserProfileController as dashboard">
<h2 class="text-center">Find Students Near By</h2>
<hr />
<div class="col-md-6" id="map-canvas"></div>
<div class="col-md-4 pull-right">
<div class="panel-success">
<div class="panel-heading">
<h3 class="text-center">List of Datalus Users</h3>
</div>
<hr />
<div ng-repeat="userProfile in dashboard.items" class="panel">
<div class="panel-heading">
<h4 class="panel-title text-center">
<a data-parent="#accordion1" href="/courses/moreinfo/{{userProfile.id}}">
{{userProfile.firstName}}
</a>
</h4>
</div>
</div>
</div><!-- /.cols -->
</div>
</div>

In your code there is no error. Might be you are doing changes from somewhere else. Here I implemented your code in jsfiddle.
angular.module("app", [])
.controller("createUserProfileController", ["$scope", function($scope){
var c = this;
c.items = [
{
id: 1,
firstName: 'hello'
}, {
id: 2,
firstName: 'bufellow'
}
];
}]);