Как сделать смену позиции абсолютному элементу если он не влезает в контейнер?

Александр Гонтарев, не написать готовый код а подсказать формулу по которой идет расчет позиции, если взглянуть на кодепен то все уже почти готово, и плагины мне не подойдут, у меня более развернутая структура нежели одна строчка текста, а передавать туда по 4 блока с данными в виде строки вообще не гуд. Тем более все это делается в рамках обучения.

Как сделать смену позиции абсолютному элементу если он не влезает в контейнер?

Ankhena, абсолютный блок относительно элемента, здесь только js , только хардкор
из готовых нашел только до кучи плагинов и 2 примера, один из которых взял за основу

Как сложить два массива в массиве объектов?

Отличный вариант, только я видимо не совсем правильно описал про сумму элементов в массиве

upd: Так же нужно сложить элементы из массива первого объекта с элементами из массива второго эл и добавить в массив с суммой каждого свойства т.е объект а) [1,2,3] и объект б) [4,5,6] сложить их и получить на выходе [ 5,7,9]

Как создавать элемент только в том случае если прошла последняя проверка?

Alexander, Шикарно, спасибо большое!)

p.s оч странно но с рф codesandbox без прокси не доступен

Как создавать элемент только в том случае если прошла последняя проверка?

Alexander, увы список виджетов не имеет понятия о статусе, по этому приходится сначало проверять список чекбоксов (который хранит статус) а затем список виджетов и сравнивать их имена а затем уже статус проверять

p.s ссылка не рабочая.

Как создавать элемент только в том случае если прошла последняя проверка?

Хороший вариант, но цикл со списокм виджетов проходит 2 раза
добавил в вопрос массивы по которым проходит цикл

И происходит такое)

Как создавать элемент только в том случае если прошла последняя проверка?

Artem0071, вас не смущает тот факт что в функцию тест падает не существующий пока аргумент widget? меня и интерпретатор смущает

Property or method "widget" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Как создавать элемент только в том случае если прошла последняя проверка?

Нельзя, он принимает как аргумент элемент из цикла v-for="widget in widgetList" который находится в диве

Почему данные из action не отправляются в mutation?

lavezzi1: я и не леплю свое, mapActions - Диспетчеризация действий в компонентах,
тем самым я просто должен был деспатчить экшн с переданными данными и типом в mutations

Почему данные из action не отправляются в mutation?

furrya_black:
уже делал приходят просто мои данные

export const saveSettings = (commit , data, example) => {
console.log(commit) //данные
console.log(data)//undefined
console.log(example)//undefined
}

Почему данные из action не отправляются в mutation?

Как я отметил, по какой то причине в экшен не приходит не коммит первым аргументом не диспатч, приходят только данные

Как удалить элемент из компонента и из store?

Никита Гущин: или же вы предложили вот такую структуру?

const state = {
    todos: [1, 2],
    todosById: {
        1: {
            id: 1,
            task: 'Do laundry',
            completed: true,
            authorId: 1
        },
        2: {
            id: 2,
            task: 'Paint fence',
            completed: false,
            authorId: 1
        }
    },
    authorsById: {
        1: {
            id: 1,
            name: 'Billy Bob',
            role: 'Assistant Editor'
        }
    }
};

Как удалить элемент из компонента и из store?

Никита Гущин: т.е получается для чтения этого id нам нужно брать this.props.id? но там же массив id
И так же не совсем понял как получать данные кроме id в компоненте элемента, ведь если мы делаем такую структуру то создаем каждый раз новый элемент
reducer

switch (action.type) {
        case  'BUTTON_CLICK':
            return [
                ...state,
                {
                    id: [action.books.id],
                    item: action.books
                }
            ];

bookitems

return (
            <div>
                {this.props.books.map((id, index) => <Book key={index} id={id.id} />)}
            </div>
        )

ну а в самом компоненте мы принимаем объект из store и так же проходим по циклу в связи с чем и у нас отрисовывается первый элемент , второй добавленный и снова первый элемент и второй добавленный.

Или же вы имели ввиду что надо передать и сам объект через родительский компонент и так же создать кнопку в род. компоненте и передать ее через пропсы дочернему?

Не совсем понятно с этой частью

а затем в mapState получаем нужную инфу и кладем ее в item. Там же (в mapActions) делаем onClick

Ведь тогда будет 2 цикла, для id и для items.
И не понятно что значит в mapActions делаем onClick

Как изменить отрисованный элемент?

Никита Гущин: ну получается что при нажатии кнопки изменить которая находится в компоненте который подписан на store , нам сначала нужно взять все данные изменяемого элемента и закинуть в store, чтоб в компоненте с полями вставлять эти данные.
Но когда мы добавляем новые данные в store то наш компонент в котором происходят изменения фиксирует что store изменен , получает новые данные и отрисовывает , и получается что элемент который мы хотели изменить просто продублировался.

Как изменить отрисованный элемент?

Никита Гущин: а как тогда там добавить эти данные в store чтоб компонент подписанный под store не принял данные и не отрендерил их?

при такой записи, у меня компонент просто получает данные и отрисовывает

для этого и нужно иметь массив id + массив элементов содержащий в себе такую структуру {id:25,item:{name:'bla'} ?

Как удалить элемент из компонента и из store?

Никита Гущин:

id вы получаете неявно.

Но id же мы получаем из того же объекта что и все данные элемента, вполне же ясно откуда мы его получили

не совсем понимаю зачем так усложнять конструкцию
Таким образом action должен иметь такой вид?

const addBook = (payload) => { return { type: 'BUTTON_CLICK', {
     id:[payload.id]
     item: payload.item
 }} };

Как изменить отрисованный элемент?

Никита Гущин:

Как-то не очень понятно каким образом вы можете наверх родителю через пропсы передать. Через callback может?

Вызываю функцию в которой передаем их вот так родителю, возможно я просто не так выразился)

this.props.addBook({
                id: random.toString(),
                author: this.authorInput.value,
                name: this.nameInput.value,
                imgUrl: this.state.imagePreviewUrl
            });

который принимает их <Inputs addBook={this.props.addBook} />
а далее диспатчит их в store

Вполне себе как вариант

А как быть с самим уже изменением элемента? т.е я принял данные в поля, изменил кнопку добавить на изменить а далее как то надо изменить именно этот элемент, что собственно я совсем не представляю.
Получается мы создаем просто новый объект а не изменяем старый?
Отрисовка и получение данных у меня пока такая

return (
                <div className='book-list clearfix'>
                    {this.props.book.map((el, index) =>
                        (el.name.length === 0 && el.author.length === 0) ? console.log(el) :
                            <div className="book-item" key={index} id={el.id}>
                                <div className="book-item__btn delete-btn" onClick={this.deleteItem}></div>
                                <div className="book-item__btn change-btn" onClick={this.test}></div>
                                <div className="book-item__img">
                                    <img src={el.imgUrl} alt=""/>
                                    <div className="book-item__info">
                                        <div>{el.author}</div>
                                        <div>{el.name }</div>
                                    </div>
                                </div>
                            </div>
                        )}
                </div>

        )

Как лучше реализовать автокомплит на js?

Увы, нужно без плагинов все сделать)

Как удалить элемент из компонента и из store?

В связи со своей неопытностью, не могу понять нужен ли умный компонент для компонента в котором мы отрисовываем данные и удаляем элементы? ну собственно как же передать сам id
не будет ли это ошибкой если обойтись без стейта и сделать вот так?

test(e){
        this.props.deleteBook({
            id: e.target.parentNode.id
        });
    }

render() {
        return (
                <div className='book-list clearfix'>
                    <h2>Здесь будет ваш список книг!</h2>
                    {this.props.book.map((el, index) =>
                        (el.name.length === 0 && el.author.length === 0) ? console.log(el) :
                            <div className="book-item" key={index} id={el.id}>
                                <div className="book-item__delete-btn" onClick={this.test}></div>
                                <div className="book-item__img">
                                    <img src={el.imgUrl} alt=""/>
                                    <div className="book-item__info">
                                        <div>{el.author}</div>
                                        <div>{el.name }</div>
                                    </div>
                                </div>
                            </div>
                        )}
                </div>

        )

Как проверить размеры картинки до ее отрисовки в dom?

Никита Полевой: Увы тут тестовое задание без бека, как вариант я сделал еще костыль что загружается сначала картинка с классом для абсолютного позиционирования и невидимостью , ну и если она проходит то мы убираем его.