Опора компонента Vue не определена (фатальная ошибка) - PullRequest
Новая
       2

Опора компонента Vue не определена (фатальная ошибка)

0 голосов
/ 26 января 2019

Я новичок в фреймворке vue.js. Я изучаю это и пытаюсь использовать это в своем хобби-проекте. Я попытался создать этот компонент с подпорками (компонент не закончен): 

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 выдает ошибку: «ReferenceError: selectedValue не определено».

Я удалил тег компонента из моего шаблона Vue, и все равно выдается та же ошибка. Я прочитал это руководство о свойствах компонента: https://vuejs.org/v2/guide/components-props.html, и я до сих пор не знаю, что я пропустил и что я сделал не так. Не могли бы вы помочь мне? Я ожидаю, что сделал очень нубистскую ошибку :)

P.S .: в моей IDE (PHP Storm) не отображаются ошибки синтаксиса JavaScript.

1 Ответ

0 голосов
/ 26 января 2019

Вы должны определить реквизиты как массив строк, а не переменных: 

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

Более того, 'name' не очень хорошее имя для реквизита. 

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>
...