Placeholder setting - allowed controls not working

Question

I am using Sitecore 9.x and recently came through with this issue. I have added a placeholder setting item and updated field Allowed Controls with controls which I need to show on that placeholder.

Also I did check both are editable rendering and placeholder setting.

But this is not working for me. It is always showing complete rendering tree not selected allowed controls.

If I am going to standard value of data template and adding that placeholder setting with placeholder key (key I defined in my layout). It is not showing but if I am putting Placeholder Key Value "undefined" it starts working but in this case it is showing same controls for all the placeholder settings.

Does anyone have any idea what I am missing here or something is wrong with my configurations?

Any help would be appreciated!

Answer 1

Finally after spending almost 2 days I found the solution for same. It's not all about issue with Sitecore only but it is issue with VueJs.

We are using VueJs for our front end development and that issue is because of that as Sitecore and VueJs both uses key property.

With the help of below updates in VueJs I am able to resolve the same.

Run the command in your VueJs solution npm install vue-scexpeditor --save

After successfully completing the above installation go to your Index.Js file under src folder and add below codes -

Add import SitecoreExpEditorPlugin from 'vue-scexpeditor'; import to top your index.js files.

also add Vue.use(SitecoreExpEditorPlugin);.

After adding above lines add

if(typeof Sitecore !== 'undefined') {
    document.querySelectorAll('code[type="text/sitecore"]').forEach(el => el.setAttribute('v-pre', ''));
    Vue.use(SitecoreExpEditorPlugin);
    // eslint-disable-next-line no-undef
    Sitecore.PageModes.ChromeManager.resetChromes();
}

Code lines to just before initializing the Vue in same index.js file.

It solved my issues for experience editor.