While developing my app I have had a wrapper (simplified for this example) which is the root of all my elements in the site. However I needed to include a component with custom properties alongside this wrapper. That's when I found that the properties on that component were never being read in.
index.html
<body>
<div id="app" > <!-- Vuejs is bound to this element -->
<test-item testProp="My Test Prop Outside Wrapper"></test-item>
<wrapper></wrapper>
</div>
</body>
TestItem.vue
<template>
<h1>{{ testProp }}</h1>
</template>
<script>
export default {
props: {
testProp: {
type: String,
default: "Default String"
}
}
}
</script>
Wrapper.vue
<template>
<div>
<test-item testProp="My Test Prop Inside Wrapper"></test-item>
</div>
</template>
<script>
export default {
}
</script>
For reference where I import these components and init the Vue instance:
Vue.component('test-item', require('./components/TestItem.vue'));
Vue.component('wrapper', require('./components/Wrapper.vue'));
const app = new Vue({
el: '#app'
});
I would have expected since I am passing in testProp on both instances that the output would look like
<h1>My Test Prop Outside Wrapper</h1>
<div>
<h1>My Test Prop Inside Wrapper</h1>
</div>
However, this is not what I am seeing, on the one outside the wrapper, the property is not passed through and the default property value is used
<h1>Default String</h1>
<div>
<h1>My Test Prop Inside Wrapper</h1>
</div>
Any ideas what is going on?
test-prop="value here"– Belmin Bedak Jan 22 at 12:01