颜色点基于其值-vue-JavaScript

Question

我已经从数据库创建了一个表。列之一称为值。 而不是显示值。我试图显示基于范围的色点。 例如，值为0或0.5，则点的颜色为红色。如果该值介于1和3之间，则颜色为橙色。 如果该值大于3，则该点变为绿色。

此刻，我出现以下错误： [Vue警告]：渲染错误：“ TypeError：_vm.range不是函数”

这可能与如何定义函数有关。以及数据类型，我赋予了我的职能。 我不明白问题是什么。有人可以帮我吗？非常感谢；

我的vue代码的一部分，以显示值列

                   <template slot="value" slot-scope="row">
                        <span class="green dot" v-if="range(row.item.value) == 2"></span>
                        <span class="orange dot" v-if="range(row.item.value) == 1"></span>
                        <span class="red dot" v-if="range(row.item.value) == 1"></span>
                    </template>

我的部分JavaScript代码

export default {
    props: ['dbdata'],
    data() {
        return {
            dbs: this.dbdata,
            dbSearch: '',
            totalRows: 1,
            currentPage: 1,
            perPage: 10,
            pageOptions: [10, 20, 50,100],
            sortBy: "id",
            sortDesc: false,
            sortDirection: 'asc',
            filter: null,
            selectMode: 'multi',
            selected: [],
            fields: {
                id: {
                    label: "Id",
                    sortable: true
                },
                name: {
                    label: "Name",
                    sortable: true
                },
                value: {
                    label: "value",
                    sortable: true
                }                    
            }
        } 
    },
            computed:{ 
        hits: function(){
            var hits = this.dbs.length
            return hits
        },
        range: function(x){
            if (x < 1){
                x = 0;
            }if(x >= 1 && x <= 3 ){
                x = 1;
            }if(x >= 3 ){
                x = 2;
            }
            return x
        }

    },

Answer 1

您使用的是计算属性，该属性不接受参数。 您需要使用的是这样的基本方法：

methods: {
  range(x) {
    if (x < 1) {
      x = 0;
    } if(x >= 1 && x <= 3 ) {
      x = 1;
    } if(x >= 3 ) {
      x = 2;
    }
    return x
  }
}

现在您可以在模板中使用您的方法了。

Answer 2

您的方法应该在Methods属性中：

computed: { 
    hits: function(){
        var hits = this.dbs.length
        return hits
    },
}
methods: {
    range: function(x){
        if (x < 1){
            x = 0;
        }if(x >= 1 && x <= 3 ){
            x = 1;
        }if(x >= 3 ){
            x = 2;
        }
        return x
    }
}

https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

在这种情况下，您可以使用css属性添加正确的颜色，而不是使用v-if。尝试创建一个将颜色作为字符串返回并将其传递给：class属性的函数：

<template slot="value" slot-scope="row">
  <span class="dot" :class="color" />
</template>

https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

我希望这是有道理的。

Answer 3

在您的帮助下，我发现了以下内容。

Vue代码

    <template slot="value" slot-scope="row">
                        <span class='dot largerSize' :class="statusColor[range(row.item.value)]"></span>
    </template>

我的部分JavaScript代码

              range: function(x){
            if (x < this.min){
                return 0;
            }else if(x >= this.min && x <= this.max ){
                return 1;
            }else if(x >= this.max ){
                return 2;
            }
        }