Writing javascript code in a component using vue-CodePudding

I am trying to make a component using Vue for my javascript code but it does not work. My main goal is to create a component with vue or Vue3

    <head>
      <title></title>  
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head
    <body>

        <div id="app">
            <myelement name="ibrahim" age="12"></myelement>
        </div>

    </body>

    <script>
        Vue.component("myelement",{
            props:["name","age"], // for arguments 
            template:` 
            <h1> welcome to my vue component,<br> name :{{name }} and age : {{age}}</h1>
            
            `// template where my code template should be 
            
        })
        var vm = new Vue({ // creating an object from Vue
            el:"#app" // bind my created code to the id "app" 
        })
    </script>

This code is working, but when I put a Javascript code in instead of html code. I got an error

this code I am using for my Javascript code, but the vue is not calling my javascript code . It is just calling my html code

    <head>
      <title></title>  
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head
    <body>
        <h3>this page works</h3>
        <div id="app">
            <myelement ></myelement >
        </div>
        
    </body>

    <script>
        document.write("<h1>Header from document.write()</h1>");

        var temp = "<h1>Hello from vue veriable</h1>"
        
        Vue.component("myelement ",{
            template:` 
                <script>
                    alert(1);
                    document.write("<h1>Header from document.write()</h1>");
                </script>

            `// template where my code template should be 
            
        })
        var vm = new Vue({ // creating an object from Vue
            el:"#app" // bind my created code to the id "app" 
        })
    </script>

what I want to do is, when I create the tag in the page then the alert(1) will show up.

CodePudding user response：

In vue, you cannot use script tag in template of components and you get below error:

[Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Instead you can put your javascript codes in created lifecycle hook. This hook is called when your component create:

<head>
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <h3>this page works</h3>
  <div id="app">
    <myelement></myelement>
  </div>
</body>

<script>
  Vue.component("myelement", {
    template: `<h2>Hello</h2>`,
  });
  var vm = new Vue({
    el: "#app",
    created() {
      alert(1);
      document.write("<h1>Header from document.write()</h1>");
    },
  });
</script>

CodePudding user response：

I'm not sure but I think this code will work correctly:

<head>
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <h3>this page works</h3>
  <div id="app">
    <myelement :message="variableAtParent"></myelement>
  </div>
</body>

<script>
  Vue.component("myelement", {
    props: ['message'],
    template: '<p>At child-comp, using props in the template: {{ message }}</p>',,
  });
  var vm = new Vue({
    el: "#app",
    data: {
    variableAtParent: 'DATA FROM PARENT!'
    }
  });
</script>