webEdition - Forum

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.

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.

webEdition - Forum

Vue js not rendering

Vue js not rendering

Re: Vue js not rendering