Vue component's prop is not defined (fatal error)

Question

I'm new to vue.js framework. I'm studying it and trying to use it on my hobby-project. I tried to create this component with props (component is not finished):

Vue.component('ingredient_select', {
    props: [name, selectedValue, text, ajaxUrl],
    template: `
        <select name="{{ name }}">
            <option value="{{ selectedValue }}">{{ text }}</option>
        </select>
    `
});

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  </head>
  <body></body>
</html>

Vue.js throws error: "ReferenceError: selectedValue is not defined".

I removed component's tag from my vue template, and still the same error is being thrown. I have read this manual about component's props: https://vuejs.org/v2/guide/components-props.html and I still don't know what I missed out and what I did wrong. Could you help me? I expect I made very noobish mistake :)

P.S.: my IDE (PHP Storm) does not show any JavaScript syntax errors.

Beniamin H Beniamin H · Accepted Answer · 2019-01-26T17:34:19

You should define props as an array of strings, not variables:

props: ['selectedValue', 'text', 'ajaxUrl']

Moreover 'name' is not a really good name for a prop.

Vue.component('ingredient_select', {
    props: ['sname', 'selectedValue', 'text', 'ajaxUrl'],
    template: `
        <select name="{{ sname }}">
            <option value="{{ selectedValue }}">{{ text }}</option>
        </select>
    `
});

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  </head>
  <body></body>
</html>

Vue component's prop is not defined (fatal error)

1 Answers