Styjun

How do you name this compound using IUPAC system (including steps)?

Do Australia and New Zealand have a travel ban on Somalis (like Wikipedia says)?

When designing an adventure, how can I ensure a continuous player experience in a setting that's likely to favor TPKs?

The most secure way to handle someone forgetting to verify their account?

Why teach C using scanf without talking about command line arguments?

Null expletive objects in Latin? "Cariotae cum ficis certandum habent" (Plin. Ep. 1,8)

Why are there few or no black super GMs?

What would be the safest way to drop thousands of small, hard objects from a typical, high wing, GA airplane?

Which GPUs to get for Mathematical Optimization (if any)?

How to interpret a promising preprint that was never published in peer-review?

Should I have one hand on the throttle during engine ignition?

Should I have shared a document with a former employee?

What is this green alien supposed to be on the American covers of the "Hitchhiker's Guide to the Galaxy"?

Why don't humans perceive sound waves as twice the frequency they are?

Brute-force the switchboard

Is it possible to have a career in SciComp without contributing to arms research?

What image should I install on VirtualBox for practising dev ops

Why is the Intel 8086 CPU called a 16-bit CPU?

Do pedestrians imitate auto traffic?

Why are flying carpets banned while flying brooms are not?

Wait or be waiting?

Company looks for long-term employees, but I know I won't be interested in staying long

/bin/sh: 0: Can't open sh

Why isn't a binary file shown as 0s and 1s?

Vue.js prop not being rendered in child component

Vue.js props not defined in ComponentVueJS: State from deleted component remains and affects the next one (sibling)Getting a form component to work with ajax in vuejsVue.js passing props to a child of dynamic componentHow to update the props for a child component in Vue.js?Dynamically rendering child components in Vue.js v2Vue.js Component rendering after prop updatePassing scoped slots through multiple componentsError when rendering component in Vue.jsProps and Data in Vue.js components

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have two components, Login.vue and Home.vue. I need to pass a variable from Login to Home using props.

So, in my parent, Login.vue i use

<template>
 <b-nav-form @submit.prevent="login">
 <home :error='error'></home>
 ...
 </b-nav-form>
</template>

and

<script>
import Home from './Home'
export default 
 name: 'Login',
 components: 
 home: Home
 ,
 data () 
 return 
 email: '',
 password: '',
 error: ''
 
 ,
 methods: 
 login () 
 // not interesting
 ,
 loginSuccessful (req) 
 //not interesting too
 ,
 loginFailed (req) 

 this.error = 'LOGIN ERROR'

 
 

</script>

I want to send error to Home

so in Home.vue

<template>
 <header class="container-home">
<div class="container h-100">
 <span>This is the HOME</span>
 <span> error</span>
</div>
 </header>
</template>
<script>
export default 
 name: 'home',
 props: ['error']


</script>

error is rendered in Login.vue but no error in Home.vue

vuejs2

share|improve this question

edited Mar 27 at 13:42

besmart

asked Mar 26 at 10:46

besmartbesmart

73333 gold badges2929 silver badges6262 bronze badges

add a comment | 

0

I have two components, Login.vue and Home.vue. I need to pass a variable from Login to Home using props.

So, in my parent, Login.vue i use

<template>
 <b-nav-form @submit.prevent="login">
 <home :error='error'></home>
 ...
 </b-nav-form>
</template>

and

<script>
import Home from './Home'
export default 
 name: 'Login',
 components: 
 home: Home
 ,
 data () 
 return 
 email: '',
 password: '',
 error: ''
 
 ,
 methods: 
 login () 
 // not interesting
 ,
 loginSuccessful (req) 
 //not interesting too
 ,
 loginFailed (req) 

 this.error = 'LOGIN ERROR'

 
 

</script>

I want to send error to Home

so in Home.vue

<template>
 <header class="container-home">
<div class="container h-100">
 <span>This is the HOME</span>
 <span> error</span>
</div>
 </header>
</template>
<script>
export default 
 name: 'home',
 props: ['error']


</script>

error is rendered in Login.vue but no error in Home.vue

vuejs2

share|improve this question

edited Mar 27 at 13:42

besmart

asked Mar 26 at 10:46

besmartbesmart

73333 gold badges2929 silver badges6262 bronze badges

add a comment | 

I have two components, Login.vue and Home.vue. I need to pass a variable from Login to Home using props.

So, in my parent, Login.vue i use

<template>
 <b-nav-form @submit.prevent="login">
 <home :error='error'></home>
 ...
 </b-nav-form>
</template>

and

<script>
import Home from './Home'
export default 
 name: 'Login',
 components: 
 home: Home
 ,
 data () 
 return 
 email: '',
 password: '',
 error: ''
 
 ,
 methods: 
 login () 
 // not interesting
 ,
 loginSuccessful (req) 
 //not interesting too
 ,
 loginFailed (req) 

 this.error = 'LOGIN ERROR'

 
 

</script>

I want to send error to Home

so in Home.vue

<template>
 <header class="container-home">
<div class="container h-100">
 <span>This is the HOME</span>
 <span> error</span>
</div>
 </header>
</template>
<script>
export default 
 name: 'home',
 props: ['error']


</script>

error is rendered in Login.vue but no error in Home.vue

vuejs2

share|improve this question

edited Mar 27 at 13:42

besmart

asked Mar 26 at 10:46

besmartbesmart

73333 gold badges2929 silver badges6262 bronze badges

<template>
 <b-nav-form @submit.prevent="login">
 <home :error='error'></home>
 ...
 </b-nav-form>
</template>

<script>
import Home from './Home'
export default 
 name: 'Login',
 components: 
 home: Home
 ,
 data () 
 return 
 email: '',
 password: '',
 error: ''
 
 ,
 methods: 
 login () 
 // not interesting
 ,
 loginSuccessful (req) 
 //not interesting too
 ,
 loginFailed (req) 

 this.error = 'LOGIN ERROR'

 
 

</script>

<template>
 <header class="container-home">
<div class="container h-100">
 <span>This is the HOME</span>
 <span> error</span>
</div>
 </header>
</template>
<script>
export default 
 name: 'home',
 props: ['error']


</script>

share|improve this question

edited Mar 27 at 13:42

besmart

asked Mar 26 at 10:46

besmartbesmart

73333 gold badges2929 silver badges6262 bronze badges

share|improve this question

edited Mar 27 at 13:42

besmart

asked Mar 26 at 10:46

besmartbesmart

73333 gold badges2929 silver badges6262 bronze badges

asked Mar 26 at 10:46

besmartbesmart

73333 gold badges2929 silver badges6262 bronze badges

asked Mar 26 at 10:46

besmartbesmart

73333 gold badges2929 silver badges6262 bronze badges

1 Answer
1

active

oldest

votes

0

https://vuejs.org/v2/guide/components-props.html

Check the section on prop casing.

You are using camelCase in the template prop name. Since HTML is case insensitive you need to use kebab-cased (hyphen-delimited) equivalent instead.

<home :error-message="error"></home>

share|improve this answer

answered Mar 26 at 17:12

TommyFTommyF

1,80422 gold badges1313 silver badges3434 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks but this is not the problem... i changed my errorMessage to simply error (updated the question) but nothing changes
  
  – besmart
  Mar 27 at 13:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @besmart then provide a codesandbox.io with your problem so we can help better.
  
  – TommyF
  Mar 28 at 14:17
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55355243%2fvue-js-prop-not-being-rendered-in-child-component%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

https://vuejs.org/v2/guide/components-props.html

Check the section on prop casing.

You are using camelCase in the template prop name. Since HTML is case insensitive you need to use kebab-cased (hyphen-delimited) equivalent instead.

<home :error-message="error"></home>

share|improve this answer

answered Mar 26 at 17:12

TommyFTommyF

1,80422 gold badges1313 silver badges3434 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks but this is not the problem... i changed my errorMessage to simply error (updated the question) but nothing changes
  
  – besmart
  Mar 27 at 13:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @besmart then provide a codesandbox.io with your problem so we can help better.
  
  – TommyF
  Mar 28 at 14:17
  

  
  
  
  

add a comment | 

0

https://vuejs.org/v2/guide/components-props.html

Check the section on prop casing.

You are using camelCase in the template prop name. Since HTML is case insensitive you need to use kebab-cased (hyphen-delimited) equivalent instead.

<home :error-message="error"></home>

share|improve this answer

answered Mar 26 at 17:12

TommyFTommyF

1,80422 gold badges1313 silver badges3434 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks but this is not the problem... i changed my errorMessage to simply error (updated the question) but nothing changes
  
  – besmart
  Mar 27 at 13:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @besmart then provide a codesandbox.io with your problem so we can help better.
  
  – TommyF
  Mar 28 at 14:17
  

  
  
  
  

add a comment | 

https://vuejs.org/v2/guide/components-props.html

Check the section on prop casing.

You are using camelCase in the template prop name. Since HTML is case insensitive you need to use kebab-cased (hyphen-delimited) equivalent instead.

<home :error-message="error"></home>

share|improve this answer

answered Mar 26 at 17:12

TommyFTommyF

1,80422 gold badges1313 silver badges3434 bronze badges

<home :error-message="error"></home>

share|improve this answer

answered Mar 26 at 17:12

TommyFTommyF

1,80422 gold badges1313 silver badges3434 bronze badges

answered Mar 26 at 17:12

TommyFTommyF

1,80422 gold badges1313 silver badges3434 bronze badges

answered Mar 26 at 17:12

TommyFTommyF

1,80422 gold badges1313 silver badges3434 bronze badges