- Make your content editable
- Create a custom component
- General usage
- AngularJS 1
- Angular 2
- Data only
- Global methods
- Component HTML
- Component CSS
- Kitchen Sink
- Content Block
- Team Page
- Contact Form
- Carousel (Slideshow)
Under the hood, each Component IO component is essentially a Vue.js instance. That means that any methods available in a Vue.js instance are available in all components delivered by Component IO.
Given a component with the field
This field would be available in the component HTML as
See Vue.js data for more
For more complex logic or for cases where you may want a transformation repeated even if the underlying data changes, you can define a
component.computed object. This object will behave similar to the
component.data object above, but its values are computed in real-time based on inputs.
Given a field
message, we could define
reversedMessage to always be the reverse text of
reversedMessage are available in the component HTML and can be used together or separately:
message is defined as “Hello World!” in the Content Editor, it will render the following:
message is changed after render (for example, by
Component(_key_).message = 'Foobar'), the value for
reversedMessage will also update.
See Vue.js Computed Properties for more
While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary.
component.watch is a more generic way to react to data changes. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.
We can design a custom input field that returns a yes or no answer based on the text entered.
In this case, using the watch option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediary states until we get a final answer. None of that would be possible with a computed property.
See Vue.js Watchers for more
component.methods object allows methods to be added to the component that are accessible directly in the component HTML. All methods have their
this context automatically bound to the component.
Say we have a
count field that we want to start at zero and increment each time a button is clicked. We can set up a method called
incrementCount to do this.
incrementCount method is now available in the HTML, and we can bind it to a button’s click event like so:
This will render a
count that gets incremented by 1 each time the button is clicked.
component.mounted to define a function that is called as soon as the component has been rendered (“mounted”).
See Vue.js mounted for more
component.updated to define a function that is called whenever a component is updated.
See Vue.js updated for more