Цветные точки основаны на их значениях - vue - javascript

Question

Я создал таблицу из базы данных. Один из столбцов называется значением. Вместо отображения значения. Я пытаюсь отобразить цветные точки в зависимости от диапазона. Например, значение равно нулю или 0,5, тогда цвет точки - красный. Если значение от 1 до 3, то цвет оранжевый. Если значение больше 3, точка окрашивается в зеленый цвет.

На данный момент я получил следующую ошибку: [Vue warn]: Ошибка при рендеринге: «Ошибка типа: _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

Ваши методы должны быть в свойстве методов:

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

Вместо использования v-if в этом случае, возможно, вы могли бы использовать свойство css для добавления правильного цвета. Попробуйте создать функцию, которая возвращает цвет в виде строки и передает его свойству: 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 2

Вы используете вычисляемое свойство , которое не принимает аргумент.Вам нужно использовать базовый метод , например:

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

Теперь вы можете использовать свой метод в своем шаблоне.

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;
            }
        }