• Как отследить в watch такую v-model: v-model="props.item.dsec_declarant_kind"?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Можно сделать computed свойство - объект, где ключами будут dsec_nnn (вы их используете для генерации id строк, так что они, как я понял, уникальны), а значениями dsec_declarant_kind, изменения которых вас интересуют:

    computed: {
      declarantKind() {
        return this.dsec.reduce((acc, n) => (
          acc[n.dsec_nnn] = n.dsec_declarant_kind,
          acc
        ), {});
      },
    },

    И отслеживать его - ищем ключ, который присутствует в текущем и предыдущем объектах, с разными значениями. Если нашли (если нет - значит, массив сортировался, или же элемент был удалён или добавлен новый), достаём соответствующий объект из массива исходных данных:

    watch: {
      declarantKind(newVal, oldVal) {
        const [ key ] = Object
          .entries(newVal)
          .find(([ k, v ]) => oldVal.hasOwnProperty(k) && oldVal[k] !== v) || [];
    
        if (key) {
          const item = this.dsec.find(n => n.dsec_nnn === key);
          console.log('объект:', item);
          console.log(`было: ${oldVal[key]}`);
          console.log(`стало: ${newVal[key]}`);
        }
      },
    },
    Ответ написан
    8 комментариев
  • Что почитать по работе JavaScript "под капотом"?

    MalkovVladimir73
    @MalkovVladimir73
    Fullstack (node + vue.js)
    Сам столкнулся с подобной проблемой, крайне советую You dont know js.
    Ответ написан
    Комментировать
  • Как изменить цвет текста (выделить слово цветом) при наведении на него мышкой?

    Nikita-Fast
    @Nikita-Fast
    SVGшник и леплю что попало
    Можно воспользоваться этим plugin и потом делать в сss hover
    Ответ написан
    Комментировать
  • VueJS + PHP. Как это всё подружить?

    @marsdenden
    vue-router сам по себе, роутер на php - сам по себе, никак между собой не связаны. Если от бэкенда нужны только данные и никакого дополнительного функционала, я бы попробовал сделать сервер на ноде, благо модули готовые есть, по крайней мере писать на одном языке проще и эффективнее, чем на двух (имхо). А так все просто - фронт использует axios, в который передается url, параметры и callback для обработки ответа. Бэк обрабатывает вызов и отправляет JSON с данными и на этом его миссия закончилась, фронт в колбэке получает json и делает свое дело.
    Например, как я это сделал (метод - всегда POST)

    в App.vue в methods
    callApi(url,prms,callback){
      this.setServerError('',''); // это функция, которая в data выставляет определенные поля
      //в результате чего ошибки выводятся прямо на странице, удобно для отладки
      axios({
        method:"post",
        url:url,
        data:prms
      }).then((response) => {
        // в response.data получаем JSON, 
        // в моем случае сервер формирует обязательные поля success,error,buffer
        // в buffer  перед выдачей JSON снимается html-вывод, возможно это отладочная информация,
        // которую выдает backend, возможно PHP-warnings
        let dt=response.data;
        if(!dt.success){
           	this.setServerError(dt.error,dt.buffer);
        }else{
            // ну и, собственно, сам вызов колбека, который происходит только в случае успешного приема данных
            callback(dt);
        }
      }).catch((error) => {
        // эту часть вызывает сам axios при возникновении серверных ошибок, то есть все, что не 200 OK 
        // позволяет увидеть, в частности, ошибку 500, вернее сам факт ее возникновения, если она обрабатывается
        // "стандартным" методом апача - пустая страница и все
        this.setServerError(error.message,error.stack);
      });
    },



    далее в created создается подписка, можно использовать Bus.js, у меня по другому

    this.$root.$on('callApi',(url,prms,callback)=>{this.callApi(url,prms,callback)});


    ну и в компоненте или где еще в проекте делается вызов

    this.$root.$emit('callApi', '/api/goods', {action: 'getgoodsinfo', article: '12345678'}, (dt) => {
             this.articleinfo=dt.data.articleinfo;
          })


    на бэкэнде, соответственно, есть api.php, в котором происходит разбор url, чтение параметров и формирование результата

    заготовка api.php
    <?php
    // регистрируем функцию завершения, чтобы обрабатывать грубые ошибки, 
    //например вызов несуществующего метода у объекта
    register_shutdown_function(function () {
        $error = error_get_last();
        if ($error && ($error['type'] == E_ERROR || $error['type'] == E_PARSE || $error['type'] == E_COMPILE_ERROR)) {
            $res=array(
                'buffer'=>ob_get_contents(),
                'success'=>false,
                'error'=>"PHP Fatal: ".$error['message']." in ".preg_replace('/(.*)\/(.*)/', "$2", $error['file']).":".$error['line']
            );
            ob_clean();
            header('HTTP/1.1 200 Ok');
            header("Access-Control-Allow-Origin: *");
            echo json_encode($res);
            // ... завершаемая корректно ....
        }
    });
    
    // для кроссдоменного CORS, при необходимости - закомментировать или заменить звездочку на требуемое
    if($_SERVER['REQUEST_METHOD']=='OPTIONS' ){
        ob_clean();
        header("Access-Control-Allow-Origin: *");
        header("Content-type: application/json; charset=utf-8");
        header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
        header("Access-Control-Request-Method: POST");
        return true;
    }
    
    // /*
    // протокол обмена
    // - вход - команда по сегменту, например http://site.ru/api/goods - api - попали сюда, goods - команда REST
    // в php://input должен быть json, в котором обязателен параметр action, например getgoodsinfo
    // в результате формируется имя функции класса goods_getgoodsinfo, которая вызывается 
    // с параметром входящего json
    
    // функция класса должна вернуть массив с тремя полями - data & success & error
    // в поле data возвращается непосредственно результат функции, в нашем случае - реестр чеков
    // в поле success возвращается true | false - признак успешного выполнения
    // в поле error возвращается описание ошибки в случае неудачного выполнения функции
    // */
    
    $api=new ApiCls();
    
    // функция, проверяющая залогиненность юзера
    if(is_user_login()){ 
        $api->checkcommand();
    }else{
        $res=array('succes'=>false,'error'=>'Пользователь не авторизован','data'=>'');
        ob_clean();
        header("Content-type: application/json; charset=utf-8");
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
        echo json_encode($res);
    }
    
    return true;
    
    class ApiCls{
        function checkcommand(){ // точка входа для класса api, здесь первичный разбор, 
            //вызов метода и возврат результата
            // главное - определить второй сегмент в url, то есть в случае http://site.ru/api/goods
            $segment=????????; // в $segment должен оказаться 'goods'
    
            $res=array('success'=>false,'error'=>'Empty action'); // сразу проверка на наличие action в параметрах
            if(!$segment){
                $res['error']='Empty command';
            }else{
                if($_SERVER['REQUEST_METHOD']=='PUT' || $_SERVER['REQUEST_METHOD']=='POST'){
                    $reqdata = file_get_contents('php://input'); 
                    $b=json_decode($reqdata);
                    $b=get_object_vars($b);
                    if(isset($b['action'])){
                        $res['error']='no error';
                        $nm=$segment.'_'.$b['action'];
                        $r=$this->$nm($b); // вызов метода по action из пост и дальнейшая обработка результатов
                        // чё-то тут намутил, но работает - и ладно
                        if(!isset($r['success'])){
                            $res['success']=false;
                            $res['error']='No success flag in method '.$nm;
                        }else{
                            if(!isset($r['data'])){
                                $res['success']=false;
                                $res['error']='No result data in method '.$nm;
                            }else{
                                $res['success']=$r['success'];
                                $res['data']=$r['data'];
                                if(!$r['success']){
                                    if(isset($r['error'])){
                                        $res['error']=$r['error'];
                                    }else{
                                        $res['error']='Success is false, but no error message in method '.$nm;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            // непосредственная выдача данных
            $this->_printresponse($res);
        }
        function _printresponse($res){
            // проверяем наличие html-вывода (отладка или warnings)
            $res['buffer']=ob_get_contents();
            if($res['buffer']!=''){
                $res['success']=false;
                isset($res['error'])?$res['error']=implode(',',array('module error',$res['error'])):$res['error']='module error';
            }
            // очищаем буфер вывода и формируем свои заголовки
            ob_clean();
            header("Content-type: application/json; charset=utf-8");
            header("Access-Control-Allow-Origin: *");
            header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
            // ну и, наконец, выдаем результирующий JSON
            echo json_encode($res);
        }
        function __call($name,$post){
            // эта функция вызывается при попытке вызвать несуществующий метод класса, то есть при вызове '/api/blablabla' получим отлуп
            $info=array('method'=>$name,'post'=>$post,'error'=>'Method not found','success'=>false);
            return $info;
        }
        /*********************************************************/
        // начинаем блок методов api
        function goods_getgoodsinfo($prm){
            // формируем заготовку ответа
            $res=array('data'=>array(),'success'=>true,'error'=>'');
            // при необходимости здесь можно вставить проверку наличия полномочий у пользователя
            // и если что не так, то выключить success, прописать "облом!" в error и не возвращать данные
            $res['data']['articleinfo']= getArticleInfo($prm['article']); // вызов функции, 
            //которая собирает требуемые данные для определенного артикула и возвращает, опять же
            // в формате JSON
            return $res;
        }
    }
    ?>



    Вот как-то так... Дальше только вопрос - как прикрутить этот api.php к сайту и вопросы безопасности, но это уже другая тема
    Ответ написан
    1 комментарий
  • Как сделать фильтрацию с помощью регулярных выражений?

    0xD34F
    @0xD34F Куратор тега Регулярные выражения
    RegExp('(?:^|\s)([' + arg + '][.]*)','gi');

    Косяк - при использовании конструктора RegExp надо экранировать обратный слеш.
    Непонятное - зачем флаг g, выделение первых букв в отдельную группу и точки, которых может вообще не быть? Вы же вроде фильтрацию делаете.

    Исправляем: RegExp(`(?:^|\\s)[${arg}]`, 'i').

    this.filter = expr;

    Раз у вас там таблица, то, надо полагать, свойство filter передаётся этой таблице в качестве значения одноимённого параметра. Почему обычное свойство? Может, стоит сделать его вычисляемым?
    Ответ написан
    1 комментарий
  • Как сделана такая анимация с открытием книжки?

    Madeas
    @Madeas
    UI / UX Designer, Frontend Developer
    Ответ написан
    Комментировать
  • Баг с font-awesome или кривые руки?

    Basitkhan
    @Basitkhan
    full-stack developer, ux/ui designer
    Используйте сервис icomoon.io с ним у вас проблем не будет)
    Ответ написан
    2 комментария
  • Как анимировать цифры?

    SnaIP
    @SnaIP
    Front-end разработчик
    Комментировать
  • Как Вы учите JavaScript, и похожие на него языки (ООП)?

    @maxsnw
    Ставишь себе проблему - и решаешь ее с помощью инструмента который у тебя в руках.
    Ответ написан
    Комментировать
  • Интересная верстка?

    @Deexter
    Можно поступить подобным образом https://jsfiddle.net/arfdnvum/1/
    Ответ написан
    1 комментарий
  • Вытаскивать только текст из строки через регулярное выражение regexp?

    lidacriss
    @lidacriss
    wtf
    $text = '20 черный/серый
    20черный/серый
    20 черный/серый/белый
    20черный/серый/белый';
    
    $strings = preg_split('/\n/s', $text, null, PREG_SPLIT_NO_EMPTY);
    $strings = array_map(function ($val){
        return explode('/', trim(preg_replace('/^\d+/', '', $val)));
    }, $strings);
    
    print_r($strings);


    Array
    (
        [0] => Array
            (
                [0] => черный
                [1] => серый
            )
        [1] => Array
            (
                [0] => черный
                [1] => серый
            )
        [2] => Array
            (
                [0] => черный
                [1] => серый
                [2] => белый
            )
        [3] => Array
            (
                [0] => черный
                [1] => серый
                [2] => белый
            )
    )
    Ответ написан
    Комментировать
  • Какие стратегии повышения зарплаты существуют?

    fedorez
    @fedorez
    Хатуль мадан
    чисто эмпирически - зарплата повышается сменой места работы. на эту тему можно много читать на хабре в хабе "Карьера в IT-индустрии"
    остальное - полумеры. или даже четвертьмеры.

    да, и ещё. люди, даже клёвые, но поставленные на административные посты (или хозяева бизнеса) ,даже на хабре, очень современные и рыночные когда что-то касается их самих, любят замешивать в вопрос кучу ненужных эмоций, интересные проекты, патриотизм родного завода и т.п. когда возникает вопрос того что деньги надо бы дать тебе.
    а выпнут тебя при необходимости вообще без эмоций. если что.
    Ответ написан
    Комментировать
  • Как сделать такой trackbar самому без plugin?

    twobomb
    @twobomb
    Когда-то делал нечто подобное. Двумя строчками можно переделать.
    Ответ написан
    Комментировать
  • Какой плагин вордпресс поможет?

    tmshchk
    @tmshchk
    Изучаю front-end и back-end разработку
    Это обычные стилизованные табы.

    Один из вариантов, наиболее близкий к вашему запросу.

    P.S. Live Preview нажмите, чтобы поклацать на сайте табы ;)
    Ответ написан
    4 комментария
  • Как можно сделать такой круг силами CSS?

    mdss
    @mdss
    оборачивайте изображение во что-нибудь, и уже у этого слоя создаете псевдоэлемент с внутренней тенью.
    Пример:
    https://codepen.io/mdss/pen/wrbOdJ
    Ответ написан
    Комментировать
  • Как выйти за пределы div content?

    SvyatYa
    @SvyatYa
    FrontEnd developer
    Можешь задать блоку такой стиль:
    .inner {
        margin-left: calc(-50vw + 50%);
        width: 100vw;
    }


    Тогда внутренний блок растянется на всю ширину страницы, от этого можешь оттолкнуться и сделать нужную тебе ширину.
    Внутри этого блока сделаешь еще один, и просто там
    margin: 0 auto
    отцентрируешь контент
    Ответ написан
    Комментировать
  • Как задетектить Яндекс.Браузер с помощью JS?

    lazalu68
    @lazalu68
    Salmon
    Последние версии Яндекс.Браузера можно определить по ключевому слову "YaBrowser" в строке юзерагента. Но насколько я знаю не существует надёжного способа на клиенте определить браузер.
    Ответ написан
    Комментировать