Error when rendering component in Vue.js

Question

I am new to Vue.js and am trying to create a sample component as per the code below but ending up with "[Vue warn]: Error when rendering component <my-tag>: " I have looked at stackoverflow for a similar question asked before but that did not help. The code for component is as below:

Vue.component('my-tag', {
  props: ['myTagAttr'],
  template: '<span>{{myTagAttr.text}}</span>'
})

var data = {
  myTagAttrVal: {
    text: 'foobar',
    color: 'Red'
  }
}

var vm = new Vue({
  el: '#demo',
  data: data
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>

<body>

  <span id='demo'>   
    <my-tag v-bind:myTagAttr='myTagAttrVal'></my-tag>
  </span>

</body>

</html>

Alternatively, code can be found at JSbin

tony19 · Accepted Answer · 2022-07-15 02:22:05Z

1

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents :

<my-tag v-bind:my-tag='myTagAttrVal'></my-tag>

Here is a working fiddle: https://jsfiddle.net/nxcbm6na/

You can find the details in the documenation

https://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

edited Jul 15, 2022 at 2:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 22, 2018 at 17:52

Postlagerkarte

7,1775 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error when rendering component in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related