Question

我正在使用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）;返回了一个有效的数字，因此这部分似乎可以正常工作。

如何解决以上错误？

谢谢。

Answer 1

我不知道原因，但是当我更改脚本导入顺序时，显示正常。但是仍然有错误...

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

1 个答案: