- Make your content editable
- Create a custom mod
- General usage
- AngularJS 1
- Angular 2+
- Data only
- Global methods
- Anymod HTML
- Anymod CSS
- Kitchen sink
- Content anywhere
- HTML & CSS on the page
- Order of items
- Contact Form
- Carousel (Slideshow)
- About Module Monday
- October 2018
- September 2018
- August 2018
- July 2018
- June 2018
Under the hood, each mod is essentially a Vue.js instance. That means that any methods available in a Vue.js instance are available in all mods delivered by Anymod.
Given a mod with the field
This field would be available in the mod 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
mod.computed object. This object will behave similar to the
mod.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 mod 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
Anymod(_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.
mod.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
mod.methods object allows methods to be added to the mod that are accessible directly in the mod HTML. All methods have their
this context automatically bound to the mod.
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.
mod.mounted to define a function that is called as soon as the mod has been rendered (“mounted”).
See Vue.js mounted for more
mod.updated to define a function that is called whenever a mod is updated.
See Vue.js updated for more