vue.js - vue.js 中未定义属性或方法

问题描述

我正在使用 Django 创建一个 Web 应用程序并在模板文件中使用 Vue.js。当我尝试根据准备好的数据显示图标时，出现以下错误。

vue.js:634 [Vue warn]: Property or method "eval" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 

vue.js:634 [Vue warn]: Unknown custom element: <star-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)

我似乎通过道具设置属性“eval”并将自定义元素放置到位。

html

<div id="stars" data-eval="{{ evaluation }}"> <!-- {{ evaluation }} is Number -->
    <ul style="list-style: none;">
        <li class="d-inline-block">
            <star-icon :eval="eval" data-id="1"></star-icon>
            <star-icon :eval="eval" data-id="2"></star-icon>
            <star-icon :eval="eval" data-id="3"></star-icon>
            <star-icon :eval="eval" data-id="4"></star-icon>
            <star-icon :eval="eval" data-id="5"></star-icon>
        </li>
    </ul>
</div>

javascript


var starIcon = {
    props: ["eval"],
    delimiters: ['[[', ']]'],
    data: function () {
        return {
            right: false,
            star_id: 0,
        }
    },
    mounted: function () {
        var elm = this.$el;
        var id = elm.getAttribute('data-id');
        this.star_id = Number(id);
    },
    template: '<i :class="star"></i>',
    computed: {
        star: function () {
            if (this.star_id <= this.eval) {
                this.right = true;
            } else {
                this.right = false;
            };
            return {
                fas: this.right,
                far: !this.right,
                'fa-star': true,
                'fa-yellow': true,
                'fa-2x': true
            };
        }
    },
}

new Vue({
    el: '#stars',
    delimiters: ['[[', ']]'],
    components: {
        'star-icon': starIcon,
    },
    data: {
        eval: 3,
    },
    beforeMount: function () {
        var elm = this.$el;
        var evaluation = elm.getAttribute('data-eval');
        this.eval = Number(evaluation);
        console.log(this.eval);
    },
})

最后一行，console.log(this.eval);，返回一个有效的数字，所以这部分似乎工作。

如何解决上述错误？

谢谢你。

标签： vue.js

vue.js - vue.js 中未定义属性或方法

问题描述

解决方案

推荐阅读