Как переписать jquery для Vue?

Question

[zilevsky]

Добрый день.

Подскажите как переписать jquery для Vue

У меня динамически генерируется таблица. В ней нужно искать td с определёнными значениями и применять к ней стиль.

К примеру в таблице есть John
Ищем имя и применяем к td класс со стилем John

Решение я вроде нашёл, но оно для jQuery
$("td:contains('John')").css('color', 'red');

Не понимаю как переписать это в методах Vue

Само решение нашёл тут
https://stackoverflow.com/questions/37609677/set-c...

Код

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-10">
        <h1>Fin Report</h1>
        <br><br>
        <table class="table table-bordered">
          <thead>
          <tr>
            <th v-for="header in finreports.header">
              {{ header }}
            </th>
          </tr>
          </thead>

          <tbody>
          <tr v-for="cell in finreports.items">
            <td v-for="item in cell">
              {{ item }}
            </td>
          </tr>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      finreports: {},
    }
  },
  methods: {
    getFinreports() {
      const path = 'http://127.0.0.1:8009/api/v1/fin_rep_vue';
      axios.get(path)
          axios.get(path, {
            params: {
              inn: this.$route.params.inn
            }
          })
          .then(response => {
            this.finreports = response.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
  },
  created() {
    this.getFinreports();
  },
};
</script>

Comments

[Сергей Соколов]

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

Показали бы код, где таблица создаётся.

[Антон Антон]

А что в этом разделе документации не понятно? https://v3.ru.vuejs.org/ru/guide/class-and-style.html

[zilevsky]

Сергей Соколов, код добавил
Я вообще думал что надо отдельную функцию в методы писать

[zilevsky]

Антон Антон, документация классная, но не понятно как оформить условие поиска нужного текста в таблице

[Антон Антон]

zilevsky, не надо искать в таблице, надо прямо в таблице сделать свойство, отвечающее за выделение. или при выводе таблицы (прям в теге <tr v-for="">) указать функцию определения класса в соответствии с документацией

[zilevsky]

Антон Антон, я вообще не силён в синтаксисе пока.
Понимаю примерно должно быть типа такого, но не знаю синтаксиса
:class="[td:contains==='Запасы' ? chg_color : '']"

[zilevsky]

Антон Антон,
Получилось вот так

<tr v-for="cell in finreports.items">
            <td v-for="item in cell" :class="[item.includes('Запасы') ? 'chg_color' : '']">
              {{ item }}
            </td>
          </tr>

[Антон Антон]

<tr v-for="row in rows">
<td :class="{'myclass': row.cell.includes('mystring')}">{{row.cell}}</td>

но лучше подготовить данные заранее, чтобы не заниматься вычислением при рендере, например

<tr v-for="row in rows">
<td :class="row.class">{{row.cell}}</td>

[zilevsky]

Антон Антон,

Правильно я понимаю что нужно вынести это в computed?

computed: {
    changeColor: function () {
      return {'chg_color': cell.includes('Запасы')}
    },
  },

И не понятно можно ли в ('mystring') передать список?

[Антон Антон]

zilevsky, не в computed, это не одно значение, а что-то вызываемое для каждой строки. в computed можно вынести всю таблицу, дополнив её нужными данными для каждой строки

И не понятно можно ли в ('mystring') передать список?

Это обычный js, в общем случае там хоть хоть интегралы вычислять можно.

[zilevsky]

Антон Антон, добавил в data. Просто параметр передаётся, а вот условие не понимаю как прокинуть

data() {
    return {
      finreports: {},
      changeColor: {'chg_color': this.includes('Внеоборотные активы')},
    }
  },

В шаблоне вот так

<tr v-for="cell in finreports.items" :class="cell.changeColor">
            <td v-for="item in cell">
              {{ item }}
            </td>
          </tr>

[Антон Антон]

zilevsky,

computed: {
 finReportsWithClass() {
    return this.finreports?.items.map(item => ({...item, class: {'my-class': item.cell.includes('Внеоборотные активы')}}))
  }
}

и выводить уже finReportsWithClass вместо finReports. параллельно начать учить js и понять, наконец, что items, cell и прочее - это я сочинил названия переменных, на самом деле там надо подставить свои.

[zilevsky]

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