Using Vue components with props

Question

I'm doing a Vue school course and I'm trying to do a little exercise with components and props. I'm trying to buid a simple button and paragraph component that takes the content of a paragraph as the prop's value:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click-Counter</title>
</head>
<body>
    <div id="app">
        <h1>Vue.js Components Fundamentals</h1>
        <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>
            <p>{{ click-title }}</p>
            <button v-on:click="count++"> {{ count }} </button>
        </div>
    </script>

    <script src="https://unpkg.com/vue"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

Vue.component('click-counter', {
    props: {
        'click-title': {
            type: String,
            required: true
        }
    },
    data () {
      return {
        count: 0
      }
    },
    template: '#click-counter-template',
})

new Vue({
    el: '#app'
})

The thing is that the content of the click-title prop is being evaluated but not rendered.

Screenshot of the Vue extension

Vue extension

Screenshot of the page's content

content

the Tin Man · Accepted Answer · 2022-02-08 05:30:22Z

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

Collectives™ on Stack Overflow

Using Vue components with props

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related