Vuejs component error, currency converter

Asked

Viewed 84 times

0

Hello, I’m trying to create a currency converter with a component, but I’m trying problems

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <meta charset="utf-8"/>
    </head>
    <body>
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Vue JS</title>
                <script src="vue.js"></script>
            </head>
            <body>

            <div id="app">
                <conversor></conversor>
            </div>

    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="index.js"></script>
</html>

index js.

 Vue.component('conversor', {
        props:{
            moedaA:{
                default:""
            },
            moedaB:{
                default:""
            },
        },
        template: ` <h2>{{moedaA}} Para {{moedaB}}</h2>
        <input type="text" v-model="moedaA_value" v-bind:placeholder="moedaA">
        <input type="button" value="Converter" v-on:click="converter">
        <h2>{{moedaB_value}}</h2>`,
    })
    new Vue({
        el: '#app',
        data: {
        },
    })

Error:

Error compiling template:

Component template should contain Exactly one root element. If you are using v-if on Multiple Elements, use v-Else-if to chain them Instead.

javascript vue.js vue.js-2

  • Puts a <div> around everything that’s inside the template:. Solve your problem?

  • I tried to do it but no solution :/

1 answer

1

As the error already says inside the template there should be exactly one parent element.

Today you have 4 elements

<h2>{{moedaA}} Para {{moedaB}}</h2>
<input type="text" v-model="moedaA_value" v-bind:placeholder="moedaA">
<input type="button" value="Converter" v-on:click="converter">
<h2>{{moedaB_value}}</h2>

The right thing would be:

<div>
   <h2>{{moedaA}} Para {{moedaB}}</h2>
   <input type="text" v-model="moedaA_value" v-bind:placeholder="moedaA">
   <input type="button" value="Converter" v-on:click="converter">
   <h2>{{moedaB_value}}</h2>
</div>

In your code

Vue.component('conversor', {
        props:{
            moedaA:{
                default:""
            },
            moedaB:{
                default:""
            },
        },
        template: ` <div><h2>{{moedaA}} Para {{moedaB}}</h2>
        <input type="text" v-model="moedaA_value" v-bind:placeholder="moedaA">
        <input type="button" value="Converter" v-on:click="converter">
        <h2>{{moedaB_value}}</h2></div>`,
    })
    new Vue({
        el: '#app',
        data: {
        },
    })

Browser other questions tagged javascript vue.js vue.js-2

You are not signed in. Login or sign up in order to post.