[Vuejs]-Using Vue components with props

by

1👍

✅

The problem was that, for Vue to understand that the prop in the app.js file and the index.html file are the same thing, you have to use camelCase in app.js (and when you define the component) and kebab-case in index.html (in the instances of the component).

In short, I changed this:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Some Head Info -->
</head>
<body>
    <div id="app">
        <h1>Vue.js Components Fundamentals</h1>
        <!-- USE kebab-case HERE (click-title) -->
        <click-counter click-title="The first counter is:"></click-counter>
        <click-counter click-title="The second counter is:"></click-counter>
        <click-counter click-title="The Third counter is:"></click-counter>
    </div>

    <script type="text/x-template" id="click-counter-template">
        <div>
            <!-- USE camelCase HERE (clickTitle) -->
            <p>{{ clickTitle }}</p>
            <button v-on:click="count++"> {{ count }} </button>
        </div>
    </script>
    
    <!-- More stuff -->
</body>
</html>

app.js:

Vue.component('click-counter', {
    props: {
        // USE camelCase HERE (clickTitle)
        'clickTitle': {
            // Atributes
        }
    },
    data () {
      // Variables
    },
    // Template
})

// New Vue
👤Wololegend

Leave a comment