Develop Reference

Vue JS Ajax data not populating Vue-Tribute on load

I am using the Vue Tribute component https://github.com/syropian/vue-tribute
When initially loading the page when the "show" data property is set to true I get "No Match!". However if I set the "show" data property to false on page load then set it to true manually I will get the two results as expected. I have tried to wrap the function call to getTributeOptions() inside of "mounted, created and updated" but I receive the same results. I am using the setTimeout() to mimic the AJAX call I am using to load the remote data.
var app = new Vue({
el: '#myApp',
data: function() {
return {
show: true,
tributeOptions: {
values: []
}
};
},
mounted: function() {
this.getTributeOptions();
},
methods: {
getTributeOptions: function(resource) {
var vm = this;
setTimeout(function() {
vm.tributeOptions.values = [
{ key: 'Phil Heartman', value: 'pheartman' },
{ key: 'Gordon Ramsey', value: 'gramsey' }
];
}, 500)
}
}
})
<div id="myApp">
<div v-if="show">
<vue-tribute :options="tributeOptions">
<input type="text" placeholder="#" />
</vue-tribute>
</div>
</div>
https://codepen.io/anon/pen/QBQaNB?editors=1111

I found the answer on this question: Vuejs mount the child components only after data has been loaded
Updated Code:
var app = new Vue({
el: '#myApp',
data: function() {
return {
userDataLoaded: false,
tributeOptions: {
values: []
}
};
},
mounted: function() {
this.getTributeOptions();
},
methods: {
getTributeOptions: function(resource) {
var vm = this;
setTimeout(function() {
vm.tributeOptions.values = [
{ key: 'Phil Heartman', value: 'pheartman' },
{ key: 'Gordon Ramsey', value: 'gramsey' }
];
vm.dataLoaded = true;
}, 500)
}
}
})
<div id="myApp">
<template>
<template v-if="dataLoaded">
<vue-tribute :options="tributeOptions">
<input type="text" placeholder="#" />
</vue-tribute>
</template>
</template>
</div>

While your workaround above would probably work, the problem lays in the library you use
In https://github.com/syropian/vue-tribute/blob/master/src/index.js#L19
mounted() {
const $el = this.$slots.default[0].elm;
this.tribute = new Tribute(this.options);
...
}
The options value is only used once in mounted(), and there is no handler for updating the values when the options are changed.
A better way to do it would be to watch for changes in this.options, and update the value inside the component respectively.

Check Vue Tribute source code at Github, you will see it will only create one new Tribute instance in mounted(). That means even you change the value of props=options once mounted, it will not affect anything.
So one solution is make sure tributeOptions is ready before mount, so update the value in created() will be an idea.
var app = new Vue({
el: '#myApp',
data: function() {
return {
tributeOptions: {
values: []
}
};
},
created: function () {
this.tributeOptions.values = [
{ key: 'Phil Heartman', value: 'pheartman' },
{ key: 'Gordon Ramsey', value: 'gramsey' }
]
},
mounted: function() {
//this.getTributeOptions();
},
methods: {
getTributeOptions: function(resource) {
var vm = this;
setTimeout(function() {
vm.tributeOptions.values = [
{ key: 'Phil Heartman', value: 'pheartman' },
{ key: 'Gordon Ramsey', value: 'gramsey' }
];
}, 500)
}
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vue-tribute"></script>
<div id="myApp">
<vue-tribute :options="tributeOptions">
<input type="text" placeholder="#" />
</vue-tribute>
</div>
another solution is download the source codes for Vue Tribute in Github, then implement update Tribute instance by yourself.
Update: create one pull request which implement update Tribute options.
the third solution will be force re-mount by bind different key every time once tributeOptions is updated:
like below demo.
var app = new Vue({
el: '#myApp',
data: function() {
return {
tributeOptions: {
values: []
},
tributeKey: 0
};
},
mounted: function() {
this.getTributeOptions();
},
methods: {
getTributeOptions: function(resource) {
var vm = this;
setTimeout(function() {
vm.tributeOptions.values = [
{ key: 'Phil Heartman', value: 'pheartman' },
{ key: 'Gordon Ramsey', value: 'gramsey' }
];
vm.tributeKey+=1
}, 500)
}
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vue-tribute"></script>
<div id="myApp">
<vue-tribute :options="tributeOptions" :key="tributeKey">
<input type="text" placeholder="#" />
</vue-tribute>
</div>

How can we pass current date-time to a angularjs function in a HTML page?

I am trying to get present date and pass it to the function - same-or-earlier-than But in the run-time, it does not pass date value to this class. Below is my html code. I am trying to get date from javascript and printing it for test.
the date is printed, but when passing it to the function, it doesnt work.
<div class="row">
<div class="hh-dock-page-view panel">
<div class="panel-body">
<div class="container">
<h2 class="hh-page-header">Issue Detail</h2>
<h3 class="hh-action-heading"><span ng-hide="ctrl.readOnly">Edit </span>Details - {{ctrl.returnCurDate()}} - {{ctrl.issue.issue_date}}"</h3>
<hh-model-form name="issueForm" model="ctrl.issue" page-controller="ctrl" submit-success="ctrl.submitSuccess" hide-actions="ctrl.readOnly">
<h2 class="hh-page-header extra-margin">{{modelFormCtrl.model.provider_name_spec_prac}} - {{ctrl.issue.issue_date}}</h2>
<div class="row">
<div class="col-sm-6">
<hh-field-messages>
<label for="issue_date">Issue Date</label>
<hh-american-date-field
id="issue_date"
name="issue_date"
ng-model="modelFormCtrl.model.issue_date"
ng-blur="modelFormCtrl.pageController.setStatus(this)"
ng-disabled="modelFormCtrl.pageController.readOnly"
same-or-earlier-than="{{ctrl.issue.issue_date}}"
same-or-earlier-than-msg="Enter a date that is on or before Resolution Date."
>
</hh-american-date-field>
</hh-field-messages>
<div class="hh-breath"></div>
</div>
</div>
</hh-model-form>
</div>
</div>
and here below is my angularjs file:
angular.module('Prm')
.controller('IssueDetailController',
['$scope', '$q', '$route', '$location', '$routeParams', 'moment', 'IssueService', 'IssuePriorityService', 'ActivityService',
'ProviderService', 'DirtyFormCheckingService', 'ConfirmBox', 'ErrorAlertService', 'AlertBoxService', 'DateService',
'ReferenceTableDataAdapter',
function ($scope, $q, $route, $location, $routeParams, moment, IssueService, IssuePriorityService, ActivityService, ProviderService,
DirtyFormCheckingService, ConfirmBox, ErrorAlertService, AlertBoxService, DateService,
ReferenceTableDataAdapter){
'use strict';
var ctrl = this,
isExisting = false,
issuePriority = null,
initPromises = [];
var currentUser = cpm.authentication.user.report_ownership_role_code;
ctrl.isAdmin = cpm.authentication.user.dss_role_list.split(",").includes('USERADMIN');
ctrl.readOnly = true;
var getNameForEdit = function(row) {
if (ctrl.readOnly) return 'View';
return 'Edit';
};
ctrl.providerAdapter = ReferenceTableDataAdapter('provider');
ctrl.ownerRoleAdapter = ReferenceTableDataAdapter('dss_report_owner_contact');
ctrl.providerIssueStatusAdapter = ReferenceTableDataAdapter('provider_issue_status');
ctrl.providerIssueSiteAdapter = ReferenceTableDataAdapter('provider_issue_site');
ctrl.providerIssuePriorityAdapter = ReferenceTableDataAdapter('provider_issue_priority');
ctrl.providerIssueCategoryAdapter = ReferenceTableDataAdapter('provider_issue_category');
if($routeParams.issue_code) {
isExisting = true;
initPromises.push(IssueService.get({id: $routeParams.issue_code}).$promise.then(function (data) {
ctrl.issue = data;
// placing this on the controller for the Parent Issue grid (if exists). Grid needs list of objects...
ctrl.parentActivities = [{'parent_provider_activity':ctrl.issue.parent_provider_activity,
'parent_provider_activity_activity_date':ctrl.issue.parent_provider_activity_activity_date,
'parent_provider_activity_description': ctrl.issue.parent_provider_activity_description}];
}));
} else {
ctrl.issue = IssueService.wrapData({
description: '',
resolution: '',
status: 'N',
site: '',
priority: 'N',
category: '',
provider: $routeParams.provider_code,
issue_date: new Date(),
owner_role: currentUser
});
ctrl.hide_resolution = true;
//ctrl.issue_date = new Date();
/* An issue may be created from a provider */
if($routeParams.provider_code) {
initPromises.push(ProviderService.get({id: $routeParams.provider_code}).$promise.then(function (data) {
ctrl.issue.provider = data.provider_code;
}));
}
}
/* Issues can have their due dates set based on their priority */
initPromises.push(IssuePriorityService.getPrioritiesMap().then(function (priorities) {
issuePriority = priorities;
if(!isExisting) {
ctrl.issue.due_date = moment(DateService.todayAsUtcDate()).add(issuePriority.N, 'day').toDate();
}
}));
/* Initialization */
$q.all(initPromises).then(function () {
/* Allow editing existing record only by owner & admins */
if(!isExisting || ctrl.isAdmin || ctrl.issue.owner_role === cpm.authentication.user.report_ownership_role_code) {
ctrl.readOnly = false;
}
// TODO: when grid actions are added
// ctrl.activitiesGrid.hideAddButton = ctrl.readOnly;
DirtyFormCheckingService($scope, 'issueForm', ctrl.issue);
});
ctrl.setDueDate = function (newModel, newCode) {
ctrl.issue.due_date = moment(ctrl.issue.issue_date).add(issuePriority[newCode], 'day').toDate();
};
ctrl.setResolutionDate = function (newModel, newCode) {
// ctrl.hide_resolution = (newCode !== 'R');
if (newCode == 'R') {
ctrl.issue.resolution_date = DateService.todayAsUtcDate();
} else {
ctrl.issue.resolution_date = null;
}
};
$scope.$watch('ctrl.issue.status', function (newCode) {
if(ctrl.issue) {
ctrl.hide_resolution = (newCode !== 'R');
}
});
ctrl.setStatus = function (event){
if (ctrl.issue.resolution_date) {
ctrl.issue.status = "R";
} else {
ctrl.issue.status = "N";
}
};
ctrl.submitSuccess = function() {
$location.url('/');
};
ctrl.parentActivityConfig = {
modelSetName: 'parentIssues',
actions: {
editRow: {
label: function(row) {
return ctrl.readOnly ? 'View' : 'Edit';
},
active: true,
callback: function(row){
$location.path('/activity/'+ctrl.issue.parent_provider_activity);
}
},
deleteRow: {
active: false
}
},
rowActions: ['editRow'],
columns: [
{col_description: 'Activity Date',
datatype: 'date',
model_field: 'parent_provider_activity_activity_date',
field_type: 'american_date',
field_name: 'activityDate'
},
{col_description: 'Description',
datatype: 'text',
model_field: 'parent_provider_activity_description',
field_type: 'text',
field_name: 'description'
},
]
};
ctrl.activitiesTableConfig = {
modelSetName: "activities",
serializerChildName: 'activities',
actions: {
addRow: {
label: 'Add Activity',
callback: function(){
$location.path('/provider/'+ctrl.issue.provider+'/add_activity/'+ctrl.issue.provider_issue_code);
},
active: function(row) {return !ctrl.readOnly;}
},
editRow: {
label: function(row) {
return getNameForEdit(row.modelSet);
},
active: true,
callback: function(row){
$location.path('/activity/'+row.modelSet.provider_activity_code);
}
},
deleteRow: {
active: function(row) {return !ctrl.readOnly;},
callback: function(row){
_.pull(ctrl.issue.activities, row.modelSet);
}
}
},
rowActions: ['editRow', 'deleteRow'],
columns: [
{col_description: 'Date',
datatype: 'date',
model_field: 'activity_date',
field_type: 'american-date',
field_name: 'activity_date'
},
{col_description: 'Type',
datatype: 'text',
model_field: 'provider_activity_type_description',
field_type: 'text',
field_name: 'provider_activity_type_description'
},
{col_description: 'Notes',
datatype: 'text',
model_field: 'description',
field_type: 'text',
field_name: 'description'
},
{col_description: 'Owner',
datatype: 'text',
model_field: 'owner_comp_name',
field_type: 'text',
field_name: 'owner_comp_name'
},
]
};
}]);

I'm trying my best to understand your question, but there's a lot of code to look through here. I do understand that you're trying to pass the current date to a function named "same-or-earlier than." However I can't seem to find a function with that name in your controller file.
I'm assuming that you've got a custom directive (attribute directive) that accepts the current date.
Either way, a simple solution for your problem of passing the current date could be to write a small function that when invoked returns the date using Javascript's native "Date" object.
Perhaps like this in your controller:
ctrl.returnCurDate = function() {
return new Date();
};
That way in your markup, you can invoke the method we've defined since it's attached to the scope of your controller.
same-or-earlier-than = "ctrl.returnCurDate()"
I hope I'm answering your problem in a relevant fashion, please feel free to ask further if I've misunderstood your question.
Best of luck.
P.S. Inherently there are some pain-in-the-butt formatting issues that come with using JS's native Date constructor, I would consider using a library such as "Moment.js" to relieve you of parsing the returned value when invoking:
new Date();

Vue JS Custom directive data binding

I'm creating a custom directive to make a form submit via ajax - however I can't seem to get validation errors to bind to the Vue instance.
I am adding my directive here:
<form action="{{ route('user.settings.update.security', [$user->uuid]) }}" method="POST"
enctype="multipart/form-data" v-ajax errors="formErrors.security" data="formData.security">
My directive looks like:
Vue.directive('ajax', {
twoWay: true,
params: ['errors', 'data'],
bind: function () {
this.el.addEventListener('submit', this.onSubmit.bind(this));
},
update: function (value) {
},
onSubmit: function (e) {
e.preventDefault();
this.vm
.$http[this.getRequestType()](this.el.action, vm[this.params.data])
.then(this.onComplete.bind(this))
.catch(this.onError.bind(this));
},
onComplete: function () {
swal({
title: 'Success!',
text: this.params.success,
type: 'success',
confirmButtonText: 'Back'
});
},
onError: function (response) {
swal({
title: 'Error!',
text: response.data.message,
type: 'error',
confirmButtonText: 'Back'
});
this.set(this.vm, this.params.errors, response.data);
},
getRequestType: function () {
var method = this.el.querySelector('input[name="_method"]');
return (method ? method.value : this.el.method).toLowerCase();
},
});
And my VUE instance looks like:
var vm = new Vue({
el: '#settings',
data: function () {
return {
active: 'profile',
updatedSettings: getSharedData('updated'),
formData: {
security: {
current_password: ''
}
},
formErrors: {
security: []
},
}
},
methods: {
setActive: function (name) {
this.active = name;
},
isActive: function (name) {
if (this.active == name) {
return true;
} else {
return false;
}
},
hasError: function (item, array, sub) {
if (this[array][sub][item]) {
return true;
} else {
return false;
}
},
isInArray: function (value, array) {
return array.indexOf(value) > -1;
},
showNotification: function () {
if (this.updatedSettings) {
$.iGrowl({
title: 'Updated',
message: 'Your settings have been updated successfully.',
type: 'success',
});
}
},
}
});
However, when I output the data, the value for formErrors.security is empty
Any idea why?

The issue is with the this.set(/* ... */) line. this.set doesn't work the same as Vue.set or vm.$set.
this.set attempts to set the path that you passed to the directive: v-my-directive="a.b.c". So running this.set('foo') will attempt to set $vm.a.b.c to 'foo'.
What you want to do is this:
(ES6)
this.params.errors.splice(0, this.params.errors.length, ...response.data)
(Vanilla JS)
this.params.errors.splice.apply(this.params.errors, [0,this.params.errors.length].concat(response.data))
That will update whatever Object is tied to the errors param on the DOM Node. Make sure that you do v-bind:errors="formErrors.security" or :errors="formErrors.security".

knockoutjs bindings issue

I'm having issues with my knockoutjs implementation. Seems to be working fine on Chrome and Safari IE and FF have thrown a hissy fit.
The message which I encounter is as follows:
Unable to parse bindings. Message: TypeError: 'AccountName' is
undefined; Bindings value: value: AccountName
The issue is happening within a script tag which serves as a knockout template:
<div id="newAccountDialog" class="dialog" data-bind="dialog: { autoOpen: false, resizable: false, modal: true, width: 350, title: 'Exchange Account'}, template: { name: 'dialogFormTemplate', data: CurrentAccount }, openDialog: IsNew"></div>
<script id="dialogFormTemplate" type="text/html">
<form id="dialogForm">
<h1>Exchange Account Manager</h1>
<p>Add new or edit an existing exchange account settings.</p>
<label for="AccountName">
Account
</label>
<input id="AccountName" name="AccountName" type="text" data-bind="value: AccountName, valueUpdate: 'afterkeydown'" class="ui-widget-content ui-corner-all" />
<div class="buttonsContainer floatRight">
<button id="Save" data-bind="click: $root.SaveAccount, dialogcmd: { id: 'newAccountDialog', cmd: 'close'}, jqButton: { icons: { primary: 'ui-icon-disk' } }">Save & Close</button>
</div>
</form>
</script>
I assume some sort of early binding is being triggered on the template
data : CurrentAccount
where an undefined / null is being passed into CurrentAccount. I have seen this issue outside of script tags, but only if the observable is not defined or null.
My viewmodel looks as following:
var AccountModel = function () {
var self = this;
self.Accounts = ko.observableArray([]);
self.CurrentAccount = ko.observable(null);
self.IsNew = ko.observable(false);
self.LoadAccounts = function () {
$account.invoke("GetAccounts", {}, function (data) {
var mapped = $.map(data, function (item) {
var account = new Account(item);
var innerMapped = $.map(item.Mailboxes, function (mailbox) {
return new Mailbox(mailbox);
});
account.Mailboxes(innerMapped);
return account;
});
self.Accounts(mapped);
});
}
self.EditAccount = function (data) {
self.CurrentAccount(data);
self.IsNew(true);
}
self.SaveAccount = function () {
if (self.CurrentAccount().Id() <= 0) {
$account.invoke('AddAccount', ko.toJS(self.CurrentAccount()), function (data) {
self.Accounts.push(new Account(data));
self.CurrentAccount(new Account(data));
self.IsNew(true);
});
} else {
$account.invoke('UpdateAccount', ko.toJS(self.CurrentAccount()), function (data) {
//self.CurrentAccount(new Account(data));
});
}
}
self.CreateAccount = function () {
self.IsNew(true);
var account = { Id: 0, AccountName: '', IsNTLM: -1, Email: '', Password: '', Domain: 'mydomain', ExchangeVersion: 1, Mailboxes: [] };
self.CurrentAccount(new Account(account));
}
};
My dialog bindingHandler is defined as follows:
ko.bindingHandlers.dialog = {
init: function (element, valueAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).dialog('destroy');
});
$(element).dialog(options);
}
};
I have ommited the Account object, as it is possibly not required in this context.
I would appreciate any help.
Thank you in advance.

There is no "early" binding in Knockout. Everything is bound when you call ko.applyBindings. But certain bindings can stop or delay binding of their descendant elements. template is one of those when you use the if or ifnot options. In your case, you can use the if option like this:
template: { name: 'dialogFormTemplate', data: CurrentAccount, 'if': CurrentAccount }
Note: The quotes around if are required in some older browsers.

Knockout Complex Data Model Binding

Let's start with the code..
Javascript to bind viewmodel and display dialog
$("#add-song").click(function () {
$("<div>")
.attr("data-bind", "template: { name: 'manage-song-template' }")
.dialog({
resizable: false,
modal: true,
title: "Add Song",
width: 960,
height: 490,
buttons: [
{
text: "Create Song",
'data-bind': 'click: savechanges',
click: function () {
}
},
{
text: "Close",
click: function () {
$(this).dialog("close");
}
}
],
close: function () {
$(this).dialog('destroy').remove();
},
open: function () {
ko.applyBindings(new my.managesongviewmodel());
jquerybindings();
}
});
});
Now let's take a look at the view model
my.managesongviewmodel = function () {
var
//Scalar Properties
song = null,
//Functions
loadfromserver = function (Id) {
$.post("/song/getsong", "id=1", function (response) {
if (response.Success) {
var data = response.Data;
var song = response.Data.Song;
var songdata = {
Song: {
Id: song.Id,
Title: song.Title,
Description: song.Description,
Lyrics: song.Lyrics,
isMaster: song.isMaster,
AudioFilePath: song.AudioFilePath,
CoverImageFilePath: song.CoverImageFilePath,
CreatedDate: song.CreatedDate
},
Genres: data.Genres,
SongAlternateTitles: data.SongAlternateTitles,
Exploitations: data.Exploitations,
SongWriterSongs: data.SongWriterSongs
};
song = new my.song(songdata);
alert(song.title());
}
});
},
savechanges = function () {
};
loadfromserver();
return {
song: song,
loadfromserver: loadfromserver
};
};
my.song = function (data) {
var
//Scalar Properties
id = ko.observable(data.Song.Id),
title = ko.observable(data.Song.Title),
description = ko.observable(data.Song.Description),
lyrics = ko.observable(data.Song.Lyrics),
ismaster = ko.observable(data.Song.isMaster),
audiofilepath = ko.observable(data.Song.AudioFilePath),
coverimagefilepath = ko.observable(data.Song.CoverImageFilePath),
createddate = ko.observable(data.Song.CreatedDate),
//Arrays
genres = ko.observableArray(data.Genres),
alttitles = ko.observableArray(data.SongAlternateTitles),
exploitations = ko.observableArray(data.Exploitations),
songwritersongs = ko.observableArray(data.SongWriterSongs);
return {
id: id,
title: title,
description: description,
lyrics: lyrics,
ismaster: ismaster,
audiofilepath: audiofilepath,
coverimagefilepath: coverimagefilepath,
createddate: createddate,
genres: genres,
alttitles: alttitles,
exploitations: exploitations,
songwritersongs: songwritersongs
};
};
Here is my template
<script type="text/html" id="manage-song-template">
<div class="modal-form">
<span data-bind="text: song.title"></span>
</div>
</script>
Chrome is throwing the error "Cannot read property 'title' of null;" when I launch the dialog. That said, the "alert(song.title());" actually shows a the song title.
Any thoughts on where I've gone wrong?
Update
I have created a jsfiddle that replicates the issue. http://jsfiddle.net/mcottingham/H7jqa/28/

It's easy. In the moment when you shows modal window your song var still equals null. So you have to wait while info about song will be loaded from server:
$("<div>").attr("data-bind", "template: { name: 'manage-song-template' }").dialog({
// another options
open: function (event, ui) {
var vm = new my.managesongviewmodel(), domNode = this;
vm.loadfromserver().done(function() {
ko.applyBindings(vm, domNode);
jquerybindings();
});
}
})
// another code
And add return statement at the begining of loadfromserver function:
loadfromserver = function (Id) {
return $.post("/song/getsong", "id=1", function (response) {
// code
});
}