Как проверить в VUE innerText на null или ' '?

Question

[feniksdv]

Привет. Хочу проверить innerText на пустое значение или ноль, но что-то у меня не получается. вот кусок кода.

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";
                                console.log('1');
                                this.errors.push('1');
                            }
                            else if (this.$refs.tr[j].cells[i].innerText === null) { //тут проверка, не работает почему-то
                                this.$refs.tr[j].cells[i + 1].bgColor = "#ffffff";
                                console.log('2');
                                this.errors.push('2');
                            }
                            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";
                                console.log(this.$refs.tr[j].cells[i + 1].innerText); //это выводит в браузер, см. на картинке
                            }
                            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";
                            }
                        }
                    }
                });
            }

Comments

[alexalexes]

Внутри второго цикла создает код-ловушку для отладки строки с индексом 20 (или какая у вас там проблемная) и ставите брейкпоинт внутри if и смотрите, что не так innerText или с ячейкой в целом.

if (j == 20)
{
   var weqwerqwe = this.$refs.tr[j].cells[i].innerText;
}

[Ярослав Иванов]

Не надо в vue работать с dom
Читайте про цикл vue

[feniksdv]

Ярослав Иванов, ссылку если можно.

[Ярослав Иванов]

feniksdv, ссылку на документацию? сами найдите

[feniksdv]

Ярослав Иванов, почитал документация, почему не надо работать с dom в vue там не рассказывается, еще предложения будут? Обратите внимание на код, там данные приходят с бекенда, они динамические. Я так понял вы предлагаете мне использовать хук created или нет. Вы бы конкретней написали, что вы имеете ввиду, я не прошу дать мне код готовый, но отправлять в гугл глупо, я без вас там был и там ничего дельного не нашел, по этому написал сюда.

[Ярослав Иванов]

feniksdv, Потому что vue это фреймоворк, направленный на создание архитектуры и работы только с данными а не представлением(DOM). То что есть $refs для работы с дум элементами это лишь сделано для редких случаев. Я не смогу вам в коротком комментарии пересказать всю философию и документацию по vue это уже сами.

[Ярослав Иванов]

feniksdv, https://ru.vuejs.org/v2/guide/

Обратите внимание, что теперь больше не нужно напрямую взаимодействовать с HTML. Приложение Vue присоединяется к одному элементу DOM (#app в данном случае), а затем полностью контролирует его. HTML является нашей точкой входа, но всё остальное происходит внутри вновь созданного экземпляра Vue.

Answer 1

[feniksdv]

Разобрался, невнимателен я, сравнивал не те колонки
это заменить
if (this.$refs.tr[j].cells[i].innerText === '')
на это

if (this.$refs.tr[j].cells[i + 1].innerText === '')