CODEWITHSUNDEEP
javascriptvue.jsvue-component
tGilvonas
tGilvonas

Reputation: 215

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

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/[email protected]/dist/vue.js"></script>
  </head>
  <body></body>
</html>

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

I removed component's tag <ingredient_select> from my vue template, and still the same error is being thrown. I have read this manual about component's props: https://v2.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.

Upvotes: 1

Views: 2844

Answers (1)

Beniamin H
Beniamin H

Reputation: 2086

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/[email protected]/dist/vue.js"></script>
  </head>
  <body></body>
</html>

Upvotes: 4

Related Questions