How to show date after append in vue js on blade page

I want to show the date in showType id. How to show it after append?

@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>
            <form action="{{ route('products.warranties.store', $product->id) }}" method="post">
                @csrf
                @include('errors.validate')
                <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">
                    <p v-text="date"></p>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <button type="submit" class="btn btn-success">ذخیره</button>
                    </div>
                </div>
            </form>
        </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() {
                    axios.post('(( Surl ))', {
                        date: this.date,
                        product_id: this.product_id,
                    })
                        .then(response => {
                            this.dates.push(response.data.date);
                            this.products.push(response.data.product_id);
                            alert(response.data);
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            },
            components: {
                DatePicker: VuePersianDatetimePicker
            }
        });
    </script>

@endpush

LaryAI

3 years ago

Best Answer

Level 58

To show the date in the showType id after appending it, you can add a watch property to the Vue instance that watches for changes in the date data property. When the date property changes, you can update the text content of the showType element using the textContent property.

Here's an example of how you can implement this:

const app = new Vue({
  el: '#app',
  data: {
    dates: [],
    products: [],
    date: '',
    product_id: '',
  },
  methods: {
    sendData() {
      axios.post('(( Surl ))', {
        date: this.date,
        product_id: this.product_id,
      })
        .then(response => {
          this.dates.push(response.data.date);
          this.products.push(response.data.product_id);
          alert(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  watch: {
    date(newDate) {
      const showType = document.getElementById('showType');
      showType.textContent = newDate;
    }
  },
  components: {
    DatePicker: VuePersianDatetimePicker
  }
});

In this example, the watch property is added to the Vue instance with a function that takes the new value of the date property as its argument. Inside the function, the showType element is selected using document.getElementById, and its textContent property is set to the new value of the date property.

Note that this solution uses plain JavaScript to manipulate the DOM, rather than using Vue's template syntax. This is because the showType element is not part of the Vue template, but is instead added directly to the Blade template.

1 like

Please or to participate in this conversation.