Как обращаться к элементам на странице vue?

Question

[feniksdv]

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

По коду расставил коменты, где у меня трудности.

<template>
    <div class="container">
        <div class="row">
            <button v-on:click="update1" type="submit" class="btn btn-primary mb-3">Обновить позиции</button>

            <table class="table">
                <thead>
                <tr>
                    <th>Ключи</th>
                    <th v-for="date in urldata.dates" v-model="urldata1">{{ date }}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="rows in urldata.keyAll">
                    <td>{{ rows }}</td>
                    <td v-for="date in urldata.dates">{{ urldata.values[date][rows] }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        data: function(){
            return{
                urldata: [],
                urldata1: []
            }
        },
        mounted() {
            this.color();
        },
        methods: {
  
//ВОТ ТУТ ВОТ БЕДА =========================================
//на jquery этот скрипт работает, но в vue не прокатывает такое обращение


            color:function () {
                console.log(this.table.rows); //выдает undefined
                // var numberRows__ = this.table.rows[1].cells.length; //количество столбцов в первой строке
                // var numberRows_ = numberRows__ - 2; // номер предпоследнего столбца
                // var numberRows = numberRows__ - 3; // номер предПРЕДпоследнего столбца
                //
                // for(var i=1; i<table.rows.length; i++)
                // {
                //     if (table.rows[i].cells[numberRows_].innerText === '')
                //     {
                //         $(table.rows[i].cells[numberRows_]).css('background-color', 'white');
                //     }
                //     else if (table.rows[i].cells[numberRows_].innerText > table.rows[i].cells[numberRows].innerText)
                //     {
                //         $(table.rows[i].cells[numberRows_]).css('background-color', 'red');
                //     }
                //     else if (table.rows[i].cells[numberRows_].innerText === table.rows[i].cells[numberRows].innerText)
                //     {
                //         $(table.rows[i].cells[numberRows_]).css('background-color', 'yellow');
                //     }
                //     else
                //     {
                //         $(table.rows[i].cells[numberRows_]).css('background-color', 'green');
                //     }
                // }
            }
        }

    }
</script>

Answer 1

[Сергей delphinpro]

В Vue другой подход. Тут мы всегда отталкиваемся от данных, и на основе их рисуем страницу. А не ковыряем DOM после его создания.

Добавьте данные раскраски в массив данных. На примере ячеек — в элементы urldata.dates
И используйте их:

<td v-for="date in urldata.dates" :style="{backgroundColor: date.backgroundColor}">
  {{ urldata.values[date][rows] }}
</td>

UPD

Comments

[feniksdv]

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

Может это проще сделать в php построить там массив и уже вывести в vue? Или я вас не правильно понял

[Сергей delphinpro]

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

[feniksdv]

Сергей delphinpro, чтобы сравнить мне нужно получить значения ячеек, а как это делать я не знаю

[Сергей delphinpro]

feniksdv, Значения ячеек из воздуха что ли берутся? Вы же эти значения и вписываете на страницу. Значит вы их знаете.

[Сергей delphinpro]

feniksdv, Дайте мне небольшой пример массива ваших данных на две-три строки. Покажу на примере.

[feniksdv]

ok

[feniksdv]

Сергей delphinpro,

"dates" => array:4 [▼
    0 => "2020_09_14"
    1 => "2020_09_16"
    2 => "2020_09_21"
    3 => "2020_09_22"
  ]
  "keyAll" => array:13 [▼
    0 => "Тест 0"
    1 => "Тест 1"
    2 => "Тест 2"
    3 => "Тест 3"
    4 => "Тест 4"
  ]
  "values" => array:4 [▼
    "2020_09_14" => array:13 [▼
      "Тест 0" => 11
      "Тест 1" => 8
      "Тест 2" => 2
      "Тест 3" => 0
      "Тест 4" => 11
    ]
    "2020_09_16" => array:10 [▼
      "Тест 0" => 9
      "Тест 1" => 8
      "Тест 2" =>99
      "Тест 3" => 0
      "Тест 4" => 13
    ]
    "2020_09_21" => array:12 [▼
     "Тест 0" => 1
      "Тест 1" => 7
      "Тест 2" => 8
      "Тест 3" => 5
      "Тест 4" => 16
    ]
    "2020_09_22" => array:12 [▼
      "Тест 0" => 18
      "Тест 1" => 33
      "Тест 2" => 4
      "Тест 3" => 5
      "Тест 4" => 1
    ]
  ]

[Сергей delphinpro]

feniksdv, Обновил ответ

[feniksdv]

Сергей delphinpro, круто, спасибо. Пока ждал решение, сделал собственный вариант

color: function () {
                axios.get('/show/' + this.site.site + '/getJson/1').then((response) => {
                    this.urldata = response.data;
                    for (let j = 0; j<this.$refs.tr.length; j++) {
                        for (let i = 1; i < this.$refs.tr[j].cells.length-1; i++) {
                            if (this.$refs.tr[j].cells[i].innerText === '') {
                                this.$refs.tr[j].cells[i + 1].bgColor = "#ffffff";
                            }
                            else if (this.$refs.tr[j].cells[i].innerText > this.$refs.tr[j].cells[i + 1].innerText) {
                                this.$refs.tr[j].cells[i + 1].bgColor = "#dbfee1";
                            }
                            else if (this.$refs.tr[j].cells[i].innerText === this.$refs.tr[j].cells[i + 1].innerText) {
                                this.$refs.tr[j].cells[i + 1].bgColor = "#fcffce";
                            }
                            else {
                                this.$refs.tr[j].cells[i + 1].bgColor = "#fedbe5";
                            }
                        }
                    }
                });
            }

Говорят что лучше $refs не использовать, но почему я особо не понял, с моим вариантом тоже все работает.

[Сергей delphinpro]

feniksdv, рефы используйте в крайнем случае и только для считывания данных.