javascript - Vue 组件的 prop 未定义( fatal error )

标签 javascript vue.js vue-component

我是 vue.js 框架的新手。我正在研究它并尝试将其用于我的爱好项目。我尝试用 props 创建这个组件(组件尚未完成):

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 模板中删除了组件的标签 ,但仍然抛出相同的错误。我已阅读本关于组件 Prop 的手册:https://v2.vuejs.org/v2/guide/components-props.html我仍然不知道我错过了什么以及我做错了什么。你可以帮帮我吗?我希望我犯了一个非常低级的错误:)

P.S.:我的 IDE (PHP Storm) 没有显示任何 JavaScript 语法错误。

最佳答案

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

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

此外,'name' 对于 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>

关于javascript - Vue 组件的 prop 未定义( fatal error ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54380875/

相关文章:

javascript - Vue 忽略自定义组件标签

javascript - 如何在 Grunt 项目中包含 Javascript 库?

javascript - 当同一 View 中有两个图表时,如何独立显示或隐藏 Primefaces 图表图例?

laravel - 安装任何 npm 模块时出错

javascript - Algolia 重定向到搜索结果

vue.js - VueJs 从父组件获取子表单数据

javascript - 如果选中,获取表行的 Id?

javascript - html2canvas 插件不捕获图像

javascript - 尝试在 Vue.js 中动态添加 id 时未定义 id

javascript - Vue.js 对于 vue 组件仅 Hook 一次创建的事件