Change value of Traits on the base of previous Traits.
Question
Hello
I am using two dropdowns in traits. On the selected value of the First drop down I am going to call an API and set data into another dropdown. I got data on console but that is not loading on the page. I have to refresh the page to view the changes. What should I do to get immediate change on the page?
Here is my code:
` comps.addType('ReUseComponent', {
// Define the Model
model: defaultModel.extend({
init() {
this.listenTo(this, 'change:selectPartial', this.doStuff);
this.listenTo(this, 'change:selectID', this.doStuff_second);
},
doStuff() {
this.get('traits').each(function(trait) {
traits_arr.push(trait.get('value'))
});
//arr contains my first dropdowns value
var categsTrait = this.get('traits').where({name: 'selectID'})[0];
categsTrait.set('options', partials_arr)
editor.trigger('change:ReUseComponent');
},
doStuff_second() {
// I have my data here
},
// Extend default properties
defaults: Object.assign({}, defaultModel.prototype.defaults, {
editable: true,
droppable: true,
traits: [
{
label: 'PartialName',
name: 'selectPartial',
type: 'select',
changeProp: 1,
options: arr
},
{
label: 'PartialID',
name: 'selectID',
type: 'select',
changeProp: 1,
options: ''
}
],
}),
}, {
isComponent: function(el) {
if (el.tagName == 'REUSECOMPONENT') {
return {
type: 'ReUseComponent'
};
}
},
}),
view: defaultType.view,
// The render() should return 'this'
render: function() {
// Extend the original render method
defaultType.view.prototype.render.apply(this, arguments);
this.el.placeholder = 'Text here'; // <- Doesn't affect the final HTML code
return this;
},
});`
I attached ScreenShot also.

I tried this also, but it will not solve my problem.
`doStuff(){
...
editor.trigger('change:selectedComponent');
}
`Answers (3)
I meant "I have to add" 😬
Have to add a listener for options change
And How can I add a listener for option change?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1951
[QUESTIONS] change or add event on add component from block
is it possible ?, change the drag and drop event to on click when adding a new component, I want to add components by clicking the block th...
Issue #477
By default disable Traits, On previous change in traits Enable next traits.
Hello, So, I want to define Two traits in the component settings. First one is CheckBox and another one is TextBox(There can be multiple)....
Issue #1816
Not allowing to upload same image on same the position after delete that image
Ajax call which is uploading image file in assests folder It's working fine to add an image from the local. But in another scenario, It's n...
Issue #1567
rte toolbar bug
Hello all, I am using the latest grapesjs stable version (40) and I noticed the following bug in the rich text editor: If the user drags an...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.