Vuej. js отладка, Google Chrome сбой - PullRequest
Новая
       43

Vuej. js отладка, Google Chrome сбой

1 голос
/ 10 января 2020

У меня проблемы с выбором в vue, даже в простейшем примере. Я создаю проект с помощью команды vue init webpack-simple. Я ничего не создаю, просто отредактируйте исходное приложение. vue в следующей форме приложения. 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 в браузере, я получаю свои контрольные точки.

enter image description here

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

enter image description here То есть любая отладка, вызванная select 'th, вызывает страница упасть. Более того, без отладки страница не падает, все отлично работает, на консоль не выводится ни одной ошибки. Часы , связанные с входом , также работают без сбоев, как в режиме отладки, так и без него. Подскажите, пожалуйста, в чем может быть проблема? Я пробовал на 2 компьютерах, на Windows и на Ubunt, результат одинаковый.

codesandbox

...