CODEWITHSUNDEEP
vue.jsvuejs2
John P
John P

Reputation: 1580

VueJS - pass properties from one component to another in the template

I'm new to Vue, and am trying to build up a set of business components that rely on other lower-level components, and pass properties to them. None of the usual data-binding v-bind:propName="xxx" or :propName="xxx" seem to work from inside a component template however, and all the documentation treats prop passing from a top-level HTML page instead of from one component to another.

For example, with the below I have a lower-level component called "exchange-panel" which takes a "title" property. I want my higher-level component to use that generic exchange-panel and pass in a title to use. I get the following error: 

[Vue warn]: Error compiling template:

        <exchange-panel :title="The Panel Title">
            <h1>test</h1>
        </exchange-panel>    


- invalid expression: :title="The Panel Title"


found in

---> <OrderbookDetail>

Here is the sample code (also at https://jsfiddle.net/ns1km8fh/

Vue.component("orderbook-detail", {
    template:`
        <exchange-panel :title="Public order book">
            <h1>test</h1>
        </exchange-panel>    
    `
});
Vue.component("exchange-panel", {
    template:`
        <div class="panel panel-default">
            <div class="panel-heading">Title: {{ title }}</div>
            <div class="panel-body">
                <slot></slot>
            </div>
        </div>`,
    props: ["title"]
})

new Vue({
    el: "#exchange-container",
    created: function () {
        window.Vue = this
    }
})

Upvotes: 1

Views: 1522

Answers (1)

Bert
Bert

Reputation: 82489

You need to quote Public order book.

 <exchange-panel :title="'Public order book'">

The value of a bound attribute is treated as a javascript expression. Javascript strings need to be enclosed in quotes of some kind (single, double, backticks).

Updated fiddle.

As @RoyJ points out, you can also simply not bind it and use it as a normal attribute.

 <exchange-panel title="Public order book">

Upvotes: 1

Related Questions