Vuej.js; Крашится Chrome при дебаге

147
12 февраля 2022, 07:10

У меня возникли проблемы с select в vue, даже в простейшем примере. Я создаю проект с помощью команды vue init webpack-simple. Ничего не создаю, просто редактирую исходный App.vue к следующему виду App.vue:

<template> 
        <div id="app"> 
            <div class="Test"> 
                <div style="padding: 10px"> 
                    <select name="LeaveType" v-model="selectData" @change="selectAction"> 
                        <option>First</option> 
                        <option>Second</option> 
                        <option>Third</option> 
                        <option>Fourth</option> 
                    </select> 
                    selectData = {{selectData}} 
                </div> 
                <div style="padding: 10px"> 
                    <input v-model="inputData" > 
                    inputData = {{inputData}} 
                </div> 
 
            </div> 
        </div> 
    </template> 
 
    <script> 
 
        export default { 
            name: 'app', 
 
            data() { 
                return { 
                    selectData: "Second", 
                    inputData: "hello" 
                } 
            }, 
            props: {}, 
            watch: { 
                selectData: function (newValue, oldValue) { 
                    console.log("watch selectData ( newValue = ", newValue, " )"); 
                }, 
                inputData: function (newValue, oldValue) { 
                    console.log("watch inputData ( newValue = ", newValue, " )"); 
                }, 
            }, 
            methods: { 
                selectAction() { 
                    console.log("selectAction"); 
                }, 
                inputAction() { 
                    console.log("inputAction"); 
                } 
            }, 
 
 
        } 
    </script> 
 
    <style> 
        #app { 
            font-family: 'Avenir', Helvetica, Arial, sans-serif; 
            -webkit-font-smoothing: antialiased; 
            -moz-osx-font-smoothing: grayscale; 
            text-align: center; 
            color: #2c3e50; 
            margin-top: 60px; 
        } 
 
        h1, h2 { 
            font-weight: normal; 
        } 
 
        ul { 
            list-style-type: none; 
            padding: 0; 
        } 
 
        li { 
            display: inline-block; 
            margin: 0 10px; 
        } 
 
        a { 
            color: #42b983; 
        } 
    </style>

запускаю сервер npm run dev

Когда я начинаю дебажить данный код(с помощью PhpStorm или chrome devtools, неважно), поставив точки останова на строчки с console.log. Изменив в браузере select я попадаю на мои точки останова.

В метод selectAction и в watch - selectData , но, если нажать F9, т.е. далее, то падает страница браузера.

Т.е. любой дебаг, вызванный select'ом вызывает падение страницы. Причем, без дебага страница не падает, все работает нормально, ни одной ошибки в консоль не выводится. Так же Watch связанный с input отрабатывает без падений, как в режиме дебага, так и без него. Подскажите, пожалуйста, в чем может быть проблема? Пробовал на 2х компьютерах, на винде и на убунте, результат одинаковый.

codesandbox

READ ALSO
Как отловить событие включения экрана телефона, чтобы снова поднять вэбсокеты?

Как отловить событие включения экрана телефона, чтобы снова поднять вэбсокеты?

Есть такая проблема, что на странице spa в браузере при выключении экрана (допустим юзер смотрит на страничку в браузере, но нажал кнопку выключения,...

140
Почему сервер не разбирает urlencoded form?

Почему сервер не разбирает urlencoded form?

Отправляю запрос в формате x-www-form-urlencoded (заголовок явно указан), на сервере читаю $_POST и там абсолютно пусто

76