Attribute name checks prevent from using Vue

[domk]

Hi,

I'd like to use DjangoCMS and Vue along side to deal with events being handled by vue in my page using the "v-on:click" attribute. However DjangoCMS refuses to add such an attribute. Why are colon rejected? Is there any correct way of doing that?

Thanks, Dom

[fsbraun]

Hi @domk! Thanks for pointing this out. Can you give some more details? Django CMS is pretty frontend agnostic. So where exactly are you trying to add v-on:click and how does it get rejected?

[domk]

Hi @fsbraun!

In my base template, I've added the Vue package:

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

I have some vue initialization code:

    <script>
      const { createApp } = Vue;

      createApp({
        delimiters: ['{(', ')}'],    /* To not mess up with Django templating engine */
        data() {
          return {
            storyVisible: false,
          }
        },
        methods: {
          toggleStory: function (event) {
             this.storyVisible = !this.storyVisible;
          }
        }
      }).mount('#app');
    </script>

Then, I can add a v-if="storyVisible to the tag that will be either displayed or hidden. To make the switch I would like to set the v-on:click attribute to toggleStory on a button. That's where I get the error message:

"v-on:click" is not a valid key. Keys must start with at least one letter and consist only of the letters, numbers, underscores or hyphens.

[fsbraun]

How do you add v-on:click to that button? Is that in a template or in the edit frontend? If so, which plugin are you using?

[domk]

OMG! I think I understand. I have the djangocms-bootstrap5 plugin installed instead of the djangocms-bootstrap4.

Sorry and thank you for your help, and the whole DjangoCMS stuff by the way!

[fsbraun]

Hm. Still, you might want to consider moving to djangocms-frontend. There certainly you can add the vue attributes. djangocms-bootstrap4 will not fully work with the upcoming django CMS 4.