Issue #397💬 AnsweredOpened October 9, 2017by HarshOB1 reactions

Change value of Traits on the base of previous Traits.

快速解答by artf1

I meant "I have to add" 😬

Read full answer below ↓

Question

代码片段TEXT
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.

![image 2](https://user-images.githubusercontent.com/28950214/31339389-57d4138c-ad20-11e7-8a32-1108a06ab8c1.jpg)



I tried this also, but it will not solve my problem.

`doStuff(){
  ...
  editor.trigger('change:selectedComponent');
}
`

Answers (3)

artfOctober 11, 2017

I meant "I have to add" 😬

artfOctober 10, 2017

Have to add a listener for options change

HarshOBOctober 10, 2017

And How can I add a listener for option change?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.