Question

我是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语法错误。

Answer 1

您应该将props定义为字符串数组，而不是变量：

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>

Vue组件的属性未定义（致命错误）

1 个答案: