Writing javascript code in a component using vue

Question

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.

script does not belong in template :)

Kokodoko
– Kokodoko

2021-10-10 11:43:06 +00:00
Commented Oct 10, 2021 at 11:43 — Kokodoko
– Kokodoko, Commented Oct 10, 2021 at 11:43

Nima Ebrazeh · Accepted Answer · 2021-10-10 10:07:19Z

2

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>

answered Oct 10, 2021 at 10:07

Nima Ebrazeh

1,3266 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

t.niese Over a year ago

document.write is something you never want to use in a vue component. I in almost all cases will bring the virtual dom and the actual dom out of sync.

Alex Over a year ago

It works thank you, but I want to pass some argument, so developer can import my javascript library. then he create <myelement name="alex" age="123"></html>. the values, developer entered in the tag I want to pass it to my javascript code and then print the result

floodlitworld Over a year ago

@Alex - and that's what props are for. Any time you think you need to use DOM manipulation with Vue, there's a pretty high chance you're doing it wrong.

ElsaKarami · Accepted Answer · 2021-10-10 14:36:36Z

1

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>

answered Oct 10, 2021 at 14:36

ElsaKarami

6461 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

Writing javascript code in a component using vue

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related