When making a vue component there is sometimes a need to have properties for the component that serve as a way to pass some values to it when using the component in a template or render function. This is where the vue props option comes into play, it can be used as a way to set some properties for a component just like attributes when it comes to actual html elements.

There is a fare amount of things to cover when it comes to vue props such as how to set default values for them, how to go about using these prop values. However I think I should also at least mention what not to do with prop values also such as mutation of prop values. The props option is not a replacement for the vue data object of a component, that is used in conjunction with props as a way to store values that are local to the component. When it comes to mutating prop values that should not, and actually can not be done, however events are how one would go about sending a mutated values back to a parent vue instance.

So lets get to some examples of props in vuejs.

Read More

When working out a project with vuejs there will be heavy use of the vue data option when making the vue components and plan old vue instances that will compose such a project. When it comes to regular vue class instances the value of a vue data option can be just a plan old object, but in other situations involving components for example it will have to be a function that will return an object.

Vue data objects are what is used as the model part of a vue instance, they are just plain old objects, but when something is changed the vue updates, or at least in most cases it should. The data object is then a live object, or as some might call it a reactive object, in any case state and view are bound together and any change to the state will update the view in turn if all goes well as it should.

In some cases a change to a nested value in a data object might not automatically update the view which means that an update must be forced, or the nested values need to also be made observable, live, or reactive if you prefer. With that in might it might be a good idea to look into the vue observable, vue set, and the force update methods. There is getting into details about how this works when it comes to native javaScript which would involve working out some examples with getters and setters which is also something that should be looked into in order to gain a better sense as to how these live objects work.

This post will center around the vue data option in vuejs, but it will also branch off into some other topics as well as needed when it comes to covering some basic and maybe not so basic things about state and vuejs.

Read More

When making vue components there might be a time now and then to use a vue slot when working out a template, or render method for a component. A vue slot is what can be used to define in the template, where anything that is passed inside the custom element of the component should go. That is that the component is like that of an html element where there is an opening and closing tag for the element, and with such elements there is the question of what should go between them. With a paragraph element it is a text node, with a div element it is additional html. With vuejs components slots are how to go about declaring where this content should go in the template of a component.

If you still are a little confused, maybe it would be a good idea to look at a few simple code examples of vue slots. I have found that learning by doing is just the best way to go about getting a solid grasp on something. So lets take a look at one or two examples of vue slots when it comes to vue component design.

Read More

A vue component is a way to create an asset of sorts for a vuejs instance. It is similar to but also very different from vue extend that can be used to create custom vuejs constructors.

A component has a name assigned to it, and can be used as a way to make custom elements that can be used in templates. There is a great deal to cover about components, as well as the many other vuejs related topics that a developer should be up to speed with before hand, but lets take a look at some basic vue component examples for starters.

Read More

The parseInt function is one of several ways to convert a string to a number in javaScript. The parseInt method does convert a string or number to an integer, but technically it is still a float as all numbers in javaScript are double precision floating point numbers.

So when using the javaScript parseInt method to produce an integer it is really just a float still technically, but for all practical purposes when it comes to the product in a mathematical sense it is an integer. The parseInt method is often the first go to solution with this, and for the most part it will work just fine. However there are other was to parse a value to an integer, or float in javaScript as well, and there are subtle little edge cases that might come up in certain situations. Some of the other options to consider are the parseFloat method that will do more or less the same as parseInt only the return value will be a float, and there is also using the Number function to convert a string to a number also. So lets take a look at paserInt and also the options that come to mind when it comes to parsing values to integers in javaScript.

Read More