[Vuejs]-Usage of Vue.js with XHTML

by

1👍

I recently encountered a problem where I had to combine Vue.js and XHTML. I I typically use Vue.js and html daily in my projects, but suddenly I found myself in a situation where I needed to integrate it with XHTML.

one of sample problem is

<input id="test" name="test" v-on:click="test()" />

XHTML would detect this code v-on:click="test()" as an error

my solution is to add that attribute via JS native after XHTML finished rendered

XHTML

<input id="test" name="test" />

JavaScript

document.getElementById("test").setAttribute('v-on:click', 'test()');
setTimeout(function(){
   // execute Vue process
},100);

Basically, the flow is to initially follow valid HTML, and then make adjustments to the HTML after it is rendered

the following is full snippet code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Vue.js  Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
    <h1>{{ message }}</h1>
    <h1  id="welcome" >Click me!!</h1>
    </div>

    <script>
    document.getElementById("welcome").setAttribute("v-on:click","test()");
    setTimeout(function(){
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            },
            methods:{
                test:function(){
                    alert('test!');
                }
            },
            mounted() {
                console.log('Component mounted');
            }
        });
    },100)
    </script>
</body>
</html>
👤trysetyoutomo

Leave a comment