I am a Python developer and I have been working on Vuejs app.
If have function that is equivalent of a() in python that takes iterables. and if all items in iterable are true than all([...]) returns true
methods: {
all: function(iterable) {
for (var index = 0; index < iterable.length; ++index) {
if (!iterable[index]) return false;
}
return true;
}
}
and here is how I validate.
if (this.all([
this.age,
this.gender,
this.contactNumber,
this.townCity,
this.department.name,
this.attendType
])
) {
window.location = "#slip"
this.displayState = 'block';
}
else{
alert("Please fill all required fields.");
}
but this is not working.
Even if I fill all the mandatory fields I have the values in all the this.* attributes still I get alert saying "Please fill all required fields."
In JS, empty string values will return false on your IF statement.
You should check this point first.
(Maybe you have to check this topic)
Other thing : Make sure your "departement.name" variable is assigned. Vuejs is not reactive with sub-properties in objects.
Reactivity In Depth (Vue.js)
Related
I am trying to display error messages when the form is submitted empty. However, the same error messages showed up based on the number of times I clicked the button. How do I show unique set of error messages instead of looping?
Here's how it looks:
Here's the code I have tried to check if form is empty:
checkForm(){
if (this.staffName && this.designation && this.staffId && this.skills) {
return true;
}
if (!this.staffName) {
this.errors.push('Staff Name required.');
}
if (!this.designation) {
this.errors.push('Designation required.');
}
// if (this.password = '') {
// alert('Password required.');
// }
if(!this.staffId){
this.errors.push('Staff ID required.')
}
if(this.skills === []){
this.errors.push('Select at least one.');
}
if(this.errors.length){
return this.errors
}
else{
for (var staff of this.info){
if(staff.staff_id == this.staffId){
this.errors.push('This Staff exist! Please try again.');
return this.errors
}
else{
this.addStaff()
}
}
}
},
Here's the code I used to display the errors if the form is empty:
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="(error, idx) in errors" :key="idx">{{ error }}</li>
</ul>
</p>
Easiest method I can think of:
Clear the array every time you fire the button
you can either do it on the template tag
<button
type="submit"
#click="errors = []"
>
or in the checkForm method
checkForm() {
this.errors = [] //make sure to place it at the top
}
Mentionables
also, not within your question but you cannot compare array with ===, or even ==, it will always return false
I am referring to this
if(this.skills === []){
this.errors.push('Select at least one.');
}
since you just want to know whether it is empty, use .length instead. But if you want to compare like
[1, 2] == [1, 2]
it will always return false, but you can google up the solution easily as it is very popular issue that JS developers face
Instead of pussing error messages to array you can use Object or even if you want to stick with error you can use array include function to check if that already in array or not. Like:
if (!this.errors.includes('Staff Name required.');
{
this.errors.push('Staff Name required.');
}
Or if you want to use Object you can do something like
data() {
return {
errors: {
staf_name: null,
}
}
}
then in your code you can update it like this.errors.staf_name = '';
Thanks
I would like to guarantee that at least one checkboxes are checked and the price are correct calculated.
https://jsfiddle.net/snoke/1xrzy57u/1/
methods: {
calc: function (item) {
item.isChecked = !item.isChecked
this.total = 0;
for (i = 0; i < this.items.length; i++) {
if(this.items[i].isChecked === true) {
this.total += this.items[i].price;
}
}
// fullPackagePrice
if(this.items[0].isChecked === true && this.items[1].isChecked === true && this.items[2].isChecked === true) {
this.total = this.fullPackagePrice;
}
// Trying to guarantee that have at least one checkbox checked
if(this.items[0].isChecked === false && this.items[1].isChecked === false && this.items[2].isChecked === false) {
this.total = this.items[0].price;
this.items[0].isChecked = true;
}
}
}
A good fit for this would be using computed properties instead of a method.
Read more about these here: https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties
A computed property observes all referenced data and when one piece changes, the function is re-run and re-evaluated.
What you could do is first create a allowCheckout computed property like this:
allowCheckout() {
return this.items[0].isChecked || this.items[1].isChecked || this.items[2].isChecked;
}
You will then use it within the button like this:
<button :disabled="allowCheckout"...
This will disable the button when no items are checked.
Next, you'll also want to create a second computed property for the total price
totalPrice() {
// Perform similar checking here to update this.total
}
Lastly, you'll want to change your checkboxes to no longer use v-on:change but to instead use v-model for the relevant parameter for each.
This way your checkbox status will be bound to the true/falseness of the variables.
If you still want to go with your method, you can implement at like shown in this updated fiddle and set a variable atLeastOneItemIsChecked like this:
this.atLeastOneItemIsChecked = this.items.find(item => item.isChecked) !== undefined
Do not force the user to always check a checkbox. Instead, display a hint and disable the button using :disable and tailwind css resulting in this:
I want always show compopent if logic one time is true.
I try add and set new var , but get "Unexpected side effect in "canShowAlways" computed property".
How i can do it in vue ?
<mycomp v-if="canShowAlways" />
data: function(){
return {
a: 0,
b: 4,
c: 1
d: 2,
isAlwaysShow: false
}
}
computed: {
canShowAlways() {
if(this.isAlwaysShow){
return true;
}
var isLast = this.a && this.b || this.c && this.d;
if(isLast){
this.isAlwaysShow = true;
return true;
}
return false;
},
In general, you should not edit other data in computed property.
This line this.isAlwaysShow = true; is most likely what causes the error that you see in your code.
If you really wanted to stick to the code you have above, then a quick solution would be to call a method that would change the value of this.isAlwaysShow.
Otherwise, you would set a watch as mentioned here.
There is most likely a better way to handle what you are trying to do but more information would need to be provided.
I just notice that object child of object has id but not that I wanted that when I try to get the object variable. I wanted what store in object of object but I found id only?
For example I used scene manage the objects to save and load for easy access.
{
x:0,
y:0,
z:0,
prarms:{height:0,width:0}
}
result from save is when I check the data I found it different.
{
x:0,
y:0,
z:0,
prarms:#randomids
}
I used set and put if the objects matches using the uuid. Need a bit of help on how it get it working. Wanted to get the whole object data but not the gundb object ids.
Manage to get partly working code for set and get data object to work partly. Here simple version how to set.
//console.log("saving object data????");
this.check_gunsceneobj(obj['uuid'],(bfind,id)=>{
//console.log("....CALLS");
var gscene = this.gun.get('scene');
//check child keys var is object to put var
function gunObjectAssign(_gun, _obj){
for(var i in _obj){
if(typeof _obj[i] == 'object'){
console.log(i);
//pathing for object child of object
_gun.path(i).put(_obj[i]);
gunObjectAssign(_gun.path(i),_obj[i]);
}
}
}
if(bfind){
console.log("set object scene[update]");
if(id !=null){
console.log(id);
gscene.path(id).put(obj);
gunObjectAssign(gscene.path(id),obj);
}
}else{
console.log("save object scene[insert]");
//console.log(obj);
gscene.set(obj);
}
console.log("object save?");
});
here the get objects.
function gunObjDataAssign(self,data){
for(var i in data){
if(typeof data[i] === 'object'){
if(data[i] !=null){
var id = data[i]['#'];
data[i] = {}; //clear id hash
self.get(id).val((objdata)=>{
delete objdata._;
data[i] = objdata;
gunObjDataAssign(self,objdata);
});
}
}
}
}
Gun.chain.valueobj = function (cb, opt) {
return this.val(function (val, field) {
if(val !=null){
delete val._;
}
gunObjDataAssign(this,val);
cb.call(this, val, field);
}, opt);
};
Gun.chain.liveobj = function (cb, opt) {
return this.on(function (val, field) {
delete val._;
gunObjDataAssign(this,val);
cb.call(this, val, field);
}, opt);
};
Gun.chain.eachobj = function () {
var each = this.map();
return this.valueobj.apply(each, arguments);
};
Have not fully tested. But it worked party not try detect any update once push to the scene objects.
Used Sample Code from snippets.
If I understand your question correctly... you probably want to use this plugin:
https://github.com/gundb/synchronous
gun.get('player').sync({}, {}, function(player){
// player updated!
console.log("Full object, not just pointers:", player);
})
There is also https://github.com/gundb/onward which gives you the diff and path on the document.
Does this help? Let me know and I'll revise the answer as necessary.
I currently have an issue with a file read in a Windows 8/WinRT application. I have a simple navigation style app, several pages have access to the same data and I have a data.js file that defines a namespace (Data) with a number of members. One part of the application saves items to a txt file stored in the applications local data folder. But on some of the other pages I need to read this in or check for the existence of an item within the list of previously saved items. To do this I added another method into the data.js file. The trouble is, when I call this method to check for the existence of an item, it doesn't return the value straight away due to the async nature, but the rest of code in the page specific js file still seems to execute before it jumps back into the parsing. This means that the logic to check for an item doesn't seem to work. I have a feeling it's down to my use of either .done or .then but my code is as follows:
DATA.JS
var doesItemExist= function(item_id){
var appFolder = Windows.Storage.ApplicationData.current.localFolder;
//note I've tried this with and without the first "return" statement
return appFolder.getFileAsync(dataFile).then(function (file) {
Windows.Storage.FileIO.readTextAsync(file).done(function (text) {
try {
var json = JSON.parse(text);
if (json) {
for (var i = 0; i < json.items.length; i++) {
var temp_item = json.items[i];
if (temp_item.id === item_id) {
return true;
break;
}
}
} else {
return false;
}
} catch (e) {
return false;
console.log(e);
}
}, function (e) { return false;console.log(e); });
}, function (e) { // error handling
return false;
console.log(e);
});
}
WinJS.Namespace.define("Data", {
doesItemExist: doesItemExist
}); //all of the above is wrapped in a self executing function
Then on Page.js I have the following:
var add = document.getElementById('add');
if (Data.doesItemExist(selected_item.id)) {
add.style.display = 'block';
} else {
add.style.display = 'none';
}
All the variables here are assigned and debugging doesn't produce any errors, control just appears to go back to the if/else statement after it hits the getFileAsync but before it even goes through the for loop. But subsequently it does go in to the for loop but after the if statement has finished. I'm guessing this is down to the async nature of it all, but I'm not sure how to get around it. Any ideas?
thanks
A Promise should work here.
I created a new Navigation app, and added a Data.js file containing the following code:
(function () {
var appData = Windows.Storage.ApplicationData;
function doesItemExist(item_id) {
return new WinJS.Promise(
function (completed, error, progress) {
var exists = false;
appData.current.localFolder.createFileAsync("data.txt", Windows.Storage.CreationCollisionOption.openIfExists).then(
function (file) {
Windows.Storage.FileIO.readTextAsync(file).then(
function (fileContents) {
if (fileContents) {
if (fileContents = "foo!") {
completed(true);
}
else {
completed(false);
}
}
else {
completed(false);
}
}
);
},
function (e) {
error(e);
}
);
}
);
}
WinJS.Namespace.define("Data", {
doesItemExist: doesItemExist
});
})();
Note that I've simplified the code for retrieving and parsing the file, since that's not really relevant to the problem. The important part is that once you've determined whether the item exists, you call completed(exists) which triggers the .then or .done of the Promise you're returning. Note that you'd call error(e) if an exception occurs, as I'm doing if there's an exception from the call to createFileAsync (I use this call rather than getFileAsync when I want to be able to either create a file if it does not exist, or return the existing file if it does, using the openIfExists option).
Then, in Home.js, I added the following code to the ready handler:
var itemExists;
var itemExistsPromise = Data.doesItemExist(42);
itemExistsPromise = itemExistsPromise.then(function (exists) {
itemExists = exists;
var content = document.getElementById("content");
content.innerText = "ItemExists is " + itemExists;
});
itemExistsPromise.done(function () {
var a = 42;
});
var b = 0;
The code above sets the variable itemExistsPromise to the returned promise from the function in Data.js, and then uses an anonymous function in the .then function of the Promise to set the variable itemExists to the Boolean value returned from the doesItemExist Promise, and grabs the <p> tag from Home.html (I added an id so I could get to it from code) and sets its text to indicate whether the item exists or not). Because I'm calling .then rather than .done, the call returns another promise, which is passed into the itemExistsPromise variable.
Next, I call itemExistsPromise.done to do any work that has to wait until after the work performed in the .then above it.
If you set a breakpoint on the lines "var a = 42" and "var b = 0" (only included for the purpose of setting breakpoints) as well as on the line "itemExists = exists", you should find that this gives you the control you need over when the various parts are executed.
Hope that helps!