[Vuejs]-Prop is undefined on Vue

by

0👍

✅

Since personal is not a variable in the parents’s data albeit its a static value that is passed to the <radio-input/> component.

To pass static props binding colons :someProp are not needed. When you use that its basically v-bind:someProp where the Vue component is going to look for someProp in its data or would try to consider it as a javascript expression like Number or Boolean or Array and not as static text to be passed on.

Change the HTML code for component to:

<radio-input radio-content="personal"></radio-input>

–Update based on code snippet & comment–:
Okay! couple of things here

  • props in Vue are something that is passed on from parent to child (consider it a way of communicating things parent->child which are Vue components or instance not pure HTML).
  • Why is not working here: You have only one Vue instance for
    <radio-input/> that is sort of parent so defining prop onto it is
    meaningless since there is no parent Vue that can pass this. Read
    Some More
  • In this case you could simply remove the prop and the binding value
    altogether and use personal text directly from data property
    value that u’ve defined, if that’s what you want.

    <html>
       <head>
       </head>
       <body>
          <radio-input></radio-input>
          <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
          <script>
             radioInput = new Vue({
               template: '<label>\n' +
                 ' <input type="radio" :name="name" :value="value" :v-model="v_model" :required="required">\n' +
                 ' <span>${ value }</span>\n' +
                 '</label>\n',
               delimiters: ['${', '}'],
               el: 'radio-input',
               data: {
                 name: 'A1_P1_S1_B0',
                 value: 'personal',
                 v_model: 'A1P1S1Q',
                 required: true,
               }
             });
          </script>
       </body>
    </html>

Leave a comment