Vue js not rendering

WL7ea
Junior Member
Beiträge: 3
Registriert: Do 20. Jul 2017, 18:30

Vue js not rendering

Beitragvon WL7ea » Do 20. Jul 2017, 20:14

Hello,

WebEdition is not rendering the variable message "Hello WebEdition!" in {{message}} only the tag is rendered and button v-on:click is not working.

Can I escape a special code in WebEdition.

I have a template called : index.tmpl

Code: Alles auswählen

<!DOCTYPE html>
<head>
<title>Vue</title>
<meta name="description" content="Vue description" />
<meta name="keywords" content="" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<script src="https://unpkg.com/jquery" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body id="vueApp">

   {{message}}
   <div class="uk-text-center">
         <button v-on:click="buyNowEvent">Buy Now</button>
    </div>

  <script>
   new Vue({
   el: '#vueApp',
   data: {
     message: 'Hello WebEdition!'
   },
   methods: {
    buyNowEvent: function(){
            this.message = this.message.split('').reverse().join('')
             }
    }
   })
   </script>

  </body>
</html>


Thank you.

WL7ea
Junior Member
Beiträge: 3
Registriert: Do 20. Jul 2017, 18:30

Re: Vue js not rendering

Beitragvon WL7ea » So 23. Jul 2017, 19:12

Problem: (#vueApp) in body

Code: Alles auswählen

<body id="vueApp">

</body>


Fixed: By removing the id (#vueApp) from body

Code: Alles auswählen

<body>
   <div id="vueApp">
   
   </div>
</body>



Thank you.


Zurück zu „Shop Module“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast