How to debugger in vue?

I want to show a debugger in vue after selecting vue-persian-datetime-picker-browser. How do I do it?

@extends('Admin.master')

@section('title', 'مدیریت گارانتی')

@section('content')

    <div id="app" class="container-fluid">
        <div class="row">
            <div class="me-auto fw-bold fs-3 col-md-3 mb-3">
                <span class="me-2"><i class="far fa-calendar-check"></i></span>
                <span>@yield('title')</span>
            </div>
            <div class="row">
                <div class="col-lg-6 mb-3 datePickerApp">
                    <label for="date" class="col-form-label">تاریخ</label>
                    <date-picker type="date" id="date" name="date" value="{{ old('date') }}" v-model="date"></date-picker>
                </div>
            </div>
            <div id="showType">

            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <button type="submit" class="btn btn-success">ذخیره</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('script')

    <script src="{{ asset('themes/vue/vue.min.js') }}"></script>
    <script src="{{ asset('themes/vue/moment.min.js') }}"></script>
    <script src="{{ asset('themes/vue/moment-jalaali.js') }}"></script>
    <script src="{{ asset('themes/vue/vue-persian-datetime-picker-browser.js') }}"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                dates: [],
                products: [],
                date: '',
                product_id: '',
            },
            methods: {
                sendData() {
                    console.log('Sending data:', this.date, this.product_id);
                    axios.post('{{ route('product.warranty.save') }}', {
                        date: this.date,
                        product_id: this.product_id,
                    })
                        .then(response => {
                            console.log('Response:', response.data);
                            this.dates.push(response.data.date);
                            this.products.push(response.data.product_id);
                            alert('Data saved successfully!');
                        })
                        .catch(error => {
                            console.log('Error:', error);
                        });
                }
            },
            watch: {
                date(newDate) {
                    const showType = document.getElementById('showType');
                    showType.textContent = newDate;
                }
            },
            components: {
                DatePicker: VuePersianDatetimePicker
            }
        });
    </script>

@endpush

LaryAI

3 years ago

Level 58

To debug in Vue, you can use the Vue Devtools browser extension. Once installed, you can open the Devtools panel in your browser and select the Vue tab to inspect your Vue components and data.

To install the Vue Devtools extension, follow the instructions for your browser on the official Vue Devtools website: https://github.com/vuejs/vue-devtools

Once installed, you can open the Devtools panel in your browser and select the Vue tab to inspect your Vue components and data.

For example, to inspect the data in the app Vue instance in the code provided, you can open the Devtools panel and select the app instance under the Vue tab. You can then expand the data property to see the current values of the dates, products, date, and product_id properties.

// Example code to inspect the `app` Vue instance in the Devtools panel
const app = new Vue({
  // ...
});

// To inspect the `app` instance in the Devtools panel, add this line of code
window.app = app;

Please or to participate in this conversation.