Задать вопрос

TjLink

Ответы

  • Как сверстать подобный header?

    @TjLink
    HTML
    <nav>
  <div class="left_side">
    <div class="logo">Лого</div>
    <div>
      <p>USDD</p>
      <p>Bla bla bla</p>
    </div>
  </div>
  <div class="right_side">
    <div>
      <button>Кнопка</button>
    </div>
    <div>Твиттер</div>
    <div>Телега</div>
    <div>Дискорд</div>
    <div>Смена языка</div>
  </div>
</nav>

    CSS
    *{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  border: 1px solid black;
}
.right_side{
  display: flex;
}
.left_side{
  display: flex;
  align-items: center;
}
.right_side > div {
  margin-right: 15px;
}
.logo{
  margin-right: 15px;
}


    С остальным поиграйся сам.
    Добавь иконки, картинки и так далее
    Ответ написан
    5 комментариев
    5 комментариев

  • Как применить действие к конкретному объекту?

    @TjLink
    Смотри, мой тебе совет, как сделать так, чтобы при нажатии на кнопку, доступна была именно эта строка.
    1) Определи массив в cumputed переменной
    computed: {
    itemsArray () {
    return this.$store.state.items
    },
    };

    2) Сделай так, чтобы у каждой строки был параметр isEditable
    {
    id: 1,
    name: '...',
    isEditable: false,
    }

    То есть, если значение false, то изменить нельзя, если true, то можно изменять.
    3) Переделай условие. :readonly="!isEditable"
    4) Как обработать нажатие на кнопку.
    attr_toggle(id) {
    const row = this.itemsArray.find((items) => items.id === id)
    row.isEditable = true;
    }

    , где id - id строки, row - найденная строка.
    Ответ написан
    Комментировать
    Комментировать

  • Почему параметр компонента указан в фигурных скобках?

    @TjLink
    ({product}) - это называется деструктуризация.
    Ведь компонент принимает props.
    const Component = (props) => {
 return (
  <div>{props.product}</div>
 )
}

    А когда ты пишешь вот так: ( { product } ), то ты просто разворачиваешь props, достаёшь оттуда значение product
    И вместо того, чтобы писать props.product, ты будешь писать просто product, так как ты уже раскрыл его.
    Главное, что имя совпадало с именем пропса.
    Деструктуризация почитай.
    Ответ написан
    3 комментария
    3 комментария

  • Как узнать ширину блока в react?

    @TjLink 
    const Component = () => {
  const divBlock = useRef(null);
  
  const showDivWidth = () => {
    console.log(divBlock.current.getBoundingClientRect());
 }

  return (
   <div ref={divBlock}>
     <button onClick={showDivWidth}>Узнать ширину divBlock</button>
   </div>
)
    Ответ написан
    Комментировать
    Комментировать

  • Как получить доступ к localStorage в store, а именно в state, используя Nuxt.js?

    @TjLink Автор вопроса
    Я решил эту проблему следующим образом:

    В layout/default, где расположен компонент Nuxt, в mounted хуке делаю диспатч:
    setLocalStorage(state) {
    state.isAuth = localStorage.getItem('isAuth')
  },

    Если знаете более правильное решение, буду рад услышать.
    Ответ написан
    Комментировать
    Комментировать