@feniksdv

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

Всем привет.
Изучаю 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>
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
В Vue другой подход. Тут мы всегда отталкиваемся от данных, и на основе их рисуем страницу. А не ковыряем DOM после его создания.

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

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


UPD
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы