Как реализовать изменение цвета объекта по условию? vue js
Суть в том что в объекту allRows добавляется свойство color со значением получаемым из API Google Sheets в виде . Задача выводить записи в шаблон с разными фонами по условию. Если ответ от апи отличный от то фон зеленый, а если то белый. Vue 2 версии Код добавления свойств: 
Код вывода зеленых полей:
Код вывода белых полей:
Выберие дату
Введите номер GPS
GPS Дата фактической загрузки Дата прибытия на ТЦ ФИО Водителя
Отслеживать
Павел Саенко
задан 14 авг 2021 в 14:14
Павел Саенко Павел Саенко
7 6 6 бронзовых знаков
Добавь текст ошибки (строку «TypeError: . of undefined») перед скриншотом, и покажи где именно (в какой части компонента, на каком этапе его жизненного цикла) выполняется код добавления свойств. Тут сама проблема ясна, но для точного ответа нужна конкретика.
14 авг 2021 в 14:25
Нене, смотри, тут важен именно момент когда данные появляются в объекте — когда именно вызывается метод accessSpreadSheet с циклом добавления свойств. Это можно и словами пояснить, если получится. Суть в том что рендеринг выполняется когда свойств еще нет, и я хочу показать как можно обойти такую ситуацию, но для этого надо последовательность операций в компоненте знать.
14 авг 2021 в 14:33
Он вызывается в created() ` created() < this.accessSpreadSheet(); >, `
14 авг 2021 в 14:34
Ага, оно. Изменение на async created() < await this.accessSpreadSheet(); >, устраняет ошибку, или она появляется по-прежнему?
14 авг 2021 в 14:36
Ок, тогда придется через computed объект. То есть, надо перебирать вычисляемый массив объектов, который имеет всего два состояния: пустое, и непустое — с наполнением при готовности данных. Я напишу ответ, только с планшетника это получится не быстро (если кто-то из коллег прочитает комменты и напишет ответ быстрее, буду признателен).
14 авг 2021 в 14:46
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Причина проблемы в том, что список рендерится до загрузки строк таблицы в компонент (свойство rows ), и до того как строкам добавляется свойство color .
Что касается родительского компонента, код которого приведен в вопросе: я отрефакторил его, убрав большинство граблей на которые может наступать рендер (код писался с планшетника и без каких-либо проверок, поэтому может содержать незначительные ошибки — не копипастим, а смотрим на сам подход работы с данными в Vue)
Выберие дату
Введите номер GPS
Value: > GPS Дата фактической загрузки Дата прибытия на ТЦ ФИО Водителя
А в шаблоне компонента Row , лучше так:
Ветвление через v-if тут совсем не требуется, меняется только одно стилевое свойство.
Как по условию изменить цвет шрифта вывода из базы данных mysql
Как изменить цвет шрифта ячейки DataGridView в зависимости от типа данных?
Строки DataGridView содержат данные разных типов. Как задать соответствие между типом данных и.
Как изменить цвет шрифта контролла
Всем привет, задаю наверно самый тупой вопрос, но никак не могу добиться того чтоб при нажатии на.
Как изменить цвет шрифта в формах?
Цвет самих полей белый и шрифт по ним белый. Плагин WP Customer Reviews. В контактной форме 7.
Как изменить цвет шрифта на кнопке (CommandButton)?
Привет ! В VB.NET и VBA это просто .ForeColor, а здесь как? Вариант подключить офисовскую.
Условный рендеринг
React позволяет разделить логику на независимые компоненты. Эти компоненты можно показывать или прятать в зависимости от текущего состояния.
Условный рендеринг в React работает так же, как условные выражения работают в JavaScript. Бывает нужно объяснить React, как состояние влияет на то, какие компоненты требуется скрыть, а какие — отрендерить, и как именно. В таких ситуациях используйте условный оператор JavaScript или выражения подобные if .
Рассмотрим два компонента:
function UserGreeting(props) return h1>С возвращением!h1>; > function GuestGreeting(props) return h1>Войдите, пожалуйста.h1>; >Можно создать компонент Greeting , который отражает один из этих компонентов в зависимости от того, выполнен ли вход на сайт:
function Greeting(props) const isLoggedIn = props.isLoggedIn; if (isLoggedIn) return UserGreeting />; > return GuestGreeting />;> const root = ReactDOM.createRoot(document.getElementById('root')); // Попробуйте заменить на isLoggedIn=: root.render(Greeting isLoggedIn=false> />);В этом примере рендерится различное приветствие в зависимости от значения пропа isLoggedIn .
Элементы React можно сохранять в переменных. Это может быть удобно, когда какое-то условие определяет, надо ли рендерить одну часть компонента или нет, а другая часть компонента остаётся неизменной.
Рассмотрим ещё два компонента, представляющих кнопки Войти (Login) и Выйти (Logout).
function LoginButton(props) return ( button onClick=props.onClick>> Войти button> ); > function LogoutButton(props) return ( button onClick=props.onClick>> Выйти button> ); >В следующем примере мы создадим компонент с состоянием и назовём его LoginControl .
Он будет рендерить либо , либо в зависимости от текущего состояния. А ещё он будет всегда рендерить из предыдущего примера.
class LoginControl extends React.Component constructor(props) super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = isLoggedIn: false>; > handleLoginClick() this.setState(isLoggedIn: true>); > handleLogoutClick() this.setState(isLoggedIn: false>); > render() const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) button = LogoutButton onClick=this.handleLogoutClick> />; > else button = LoginButton onClick=this.handleLoginClick> />; > return ( div> Greeting isLoggedIn=isLoggedIn> /> button> div> ); > > const root = ReactDOM.createRoot(document.getElementById('root')); root.render(LoginControl />);Нет ничего плохого в том, чтобы объявить переменную и условно рендерить компонент if -выражением. Но иногда хочется синтаксис покороче. Давайте посмотрим на несколько других способов писать условия прямо в JSX.
Встроенные условия if с логическим оператором &&
Вы можете внедрить любое выражение в JSX, заключив его в фигурные скобки. Это правило распространяется и на логический оператор && языка JavaScript, которым можно удобно вставить элемент в зависимости от условия:
function Mailbox(props) const unreadMessages = props.unreadMessages; return ( div> h1>Здравствуйте!h1> unreadMessages.length > 0 && h2> У вас unreadMessages.length> непрочитанных сообщений. h2> > div> ); > const messages = ['React', 'Re: React', 'Re:Re: React']; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(Mailbox unreadMessages=messages> />);Приведённый выше вариант работает корректно, потому что в JavaScript-выражение true && expression всегда вычисляется как expression , а выражение false && expression — как false .
То есть, если условие истинно ( true ), то элемент, идущий непосредственно за && , будет передан на вывод. Если же оно ложно ( false ), то React проигнорирует и пропустит его.
Обратите внимание, что ложное выражение, как ожидается, пропустит элемент после && , но при этом выведет результат этого выражения. В примере ниже метод render вернёт
.
render() const count = 0; return ( div> count && h1>Количество сообщений: count>h1>> div> ); >Встроенные условия if-else с тернарным оператором
Есть ещё один способ писать условия прямо в JSX. Вы можете воспользоваться тернарным оператором condition ? true : false .
Вот как этот метод можно использовать, чтобы отрендерить кусочек текста.
render() const isLoggedIn = this.state.isLoggedIn; return ( div> Пользователь b>isLoggedIn ? 'сейчас' : 'не'>b> на сайте. div> ); >Этот метод можно использовать и с выражениями покрупнее, но это может сделать код менее очевидным:
render() const isLoggedIn = this.state.isLoggedIn; return ( div> isLoggedIn ? LogoutButton onClick=this.handleLogoutClick> /> : LoginButton onClick=this.handleLoginClick> /> > div> ); >Как в JavaScript, так и в React выбор синтаксиса зависит от ваших предпочтений и принятого в команде стиля. Не забывайте, что если какое-то условие выглядит очень сложным, возможно пришло время извлечь часть кода в отдельный компонент.
Предотвращение рендеринга компонента
В редких случаях может потребоваться позволить компоненту спрятать себя, хотя он уже и отрендерен другим компонентом. Чтобы этого добиться, верните null вместо того, что обычно возвращается на рендеринг.
Например, будет ли содержимое отрендерено, зависит от значения пропа под именем warn . Если значение false , компонент ничего не рендерит:
function WarningBanner(props) if (!props.warn) return null; > return ( div className="warning"> Предупреждение! div> ); > class Page extends React.Component constructor(props) super(props); this.state = showWarning: true>; this.handleToggleClick = this.handleToggleClick.bind(this); > handleToggleClick() this.setState(state => ( showWarning: !state.showWarning >)); > render() return ( div> WarningBanner warn=this.state.showWarning> /> button onClick=this.handleToggleClick>> this.state.showWarning ? 'Спрятать' : 'Показать'> button> div> ); > > const root = ReactDOM.createRoot(document.getElementById('root')); root.render(Page />);Сам факт возврата null из метода render компонента никак не влияет на срабатывание методов жизненного цикла компонента. Например, componentDidUpdate будет всё равно вызван.
Отрисовка по условию
В React вы можете создавать отдельные компоненты, которые инкапсулируют нужное вам поведение. Затем вы можете отрисовать только некоторые из них, в зависимости от состояния вашего приложения.
Условная отрисовка в React работает так же, как условия работы в JavaScript. Используйте JavaScript-операторы, например if или тернарный оператор, чтобы создать элементы, представляющие текущее состояние, и пусть React обновит пользовательский интерфейс для соответствия им.
Рассмотрим эти два компонента:
function UserGreeting(props) return h1>С возвращением!h1>; > function GuestGreeting(props) return h1>Пожалуйста, зарегистрируйтесь.h1>; >Мы создадим компонент Greeting , который отрисовывает любой из этих компонентов в зависимости от того, вошел ли пользователь в систему:
function Greeting(props) const isLoggedIn = props.isLoggedIn; if (isLoggedIn) return UserGreeting />; > return GuestGreeting />; > ReactDOM.render( // Попробуйте изменить на isLoggedIn=: Greeting isLoggedIn=false> />, document.getElementById('root') );Этот пример отрисовывает другое приветствие в зависимости от значения свойства isLoggedIn .
Вы можете использовать переменные для хранения элементов. Это может помочь вам по условию отрисовать часть компонента, в то время как остальная часть вывода не изменится.
Рассмотрим эти два новых компонента, представляющих кнопки для выхода и авторизации:
function LoginButton(props) return ( button onClick=props.onClick>> Авторизация button> ); > function LogoutButton(props) return ( button onClick=props.onClick>> Выход button> ); >В приведённом ниже примере мы создадим компонент с состоянием с именем LoginControl .
Он будет отрисовывать либо или в зависимости от текущего состояния. Он также отрисует из предыдущего примера:
class LoginControl extends React.Component constructor(props) super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = isLoggedIn: false>; > handleLoginClick() this.setState(isLoggedIn: true>); > handleLogoutClick() this.setState(isLoggedIn: false>); > render() const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) button = LogoutButton onClick=this.handleLogoutClick> />; > else button = LoginButton onClick=this.handleLoginClick> />; > return ( div> Greeting isLoggedIn=isLoggedIn> /> button> div> ); > > ReactDOM.render( LoginControl />, document.getElementById('root') );Хотя объявление переменной и использование оператора if — прекрасный способ по условию отрисовать компонент, иногда возможно вы захотите использовать более короткий синтаксис. В JSX существует несколько способов встроенных условий, описанных ниже.
Встроенный оператор if с логическим оператором &&
Вы можете вставлять любые выражения в JSX, обертывая их фигурными фигурными скобками. Это включает в себя логический JavaScript-оператор && . Это может быть удобно для условного включения элемента:
Вы можете вставлять любые выражения в JSX, обёртывания их фигурными скобками. Это включает логический JavaScript-оператор && . Это может быть удобно для условной отрисовки элемента:
function Mailbox(props) const unreadMessages = props.unreadMessages; return ( div> h1>Привет!h1> unreadMessages.length > 0 && h2> У вас unreadMessages.length> непрочитанных сообщений. h2> > div> ); > const messages = ['React', 'Re: React', 'Re:Re: React']; ReactDOM.render( Mailbox unreadMessages=messages> />, document.getElementById('root') );Это работает, потому что в JavaScript true && expression всегда вычисляется в expression , а false && expression всегда вычисляется в false .
Поэтому, если условие равно true , элемент справа после && появится в выводе. Если оно false , React игнорирует и пропускает его.
Встроенный оператор if-else с тернарным оператором
Другой метод встроенной условной отрисовки элементов — использование условного оператора в JavaScript условие ? true : false .
В приведённом ниже примере мы используем его для условной отрисовки небольшого блока текста.
render() const isLoggedIn = this.state.isLoggedIn; return ( div> Пользователь b>isLoggedIn ? 'в данный момент' : 'не'>b> авторизован. div> ); >Он также может использоваться для больших выражений, хотя из-за этого менее очевидно, что происходит:
render() const isLoggedIn = this.state.isLoggedIn; return ( div> isLoggedIn ? ( LogoutButton onClick=this.handleLogoutClick> /> ) : ( LoginButton onClick=this.handleLoginClick> /> )> div> ); >Как и в JavaScript, вы можете выбрать подходящий стиль, основанный на том, что вы и ваша команда считаете более читабельным. Также помните, что всякий раз, когда условия становятся слишком сложными, возможно, самое время извлечь компонент.
Предотвращение отрисовки компонента
В редких случаях, возможно, вам потребуется скрыть компонент, даже если он был отрисован другим компонентом. Для этого возвращаем null вместо вывода отрисовки.
В приведённом ниже примере отрисовывается в зависимости от значения свойства с названием warn . Если значение этого свойства равно false , то компонент не отрисовывается:
function WarningBanner(props) if (!props.warn) return null; > return ( div className="warning"> Предупреждение! div> ); > class Page extends React.Component constructor(props) super(props); this.state = showWarning: true>; this.handleToggleClick = this.handleToggleClick.bind(this); > handleToggleClick() this.setState(state => ( showWarning: !state.showWarning >)); > render() return ( div> WarningBanner warn=this.state.showWarning> /> button onClick=this.handleToggleClick>> this.state.showWarning ? 'Скрыть' : 'Показать'> button> div> ); > > ReactDOM.render( Page />, document.getElementById('root') );Возврат null из метода компонента render не влияет на запуск методов жизненного цикла компонента. Например, componentDidUpdate по-прежнему будет вызываться.