How to appeend in vue

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

I have an element id of showType.

<div id="showType">

</div>

script

<script>
    let product_id = "{{ $product->id }}";
    let warranty_id = "{{ $warranty->id }}";
    const app = new Vue({
        el: '#app',
        data: {
            dates: [],
            products: [],
            warranties: [],
            date: '',
            product_id: product_id,
            warranty_id: warranty_id,
            showType: '', // add this line to define showType in the data object
        },
        watch: {
            date(newDate) {
                const vm = this;
                axios.post('{{ route('products.warranties.save', [$product->id, $warranty->id]) }}', {
                    date: newDate,
                    product_id: this.product_id,
                    warranty_id: this.warranty_id,
                })
                    .then(response => {
                        console.log(response.data);
                        const showType = document.getElementById('showType');
                        vm.showType.textContent = response.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        components: {
            DatePicker: VuePersianDatetimePicker
        }
    });
</script>

LaryAI

3 years ago

Level 58

To append the date to the showType element, you can use Vue's data binding to bind the showType element's content to the date property in the Vue instance's data object. Here's how you can modify the code to achieve this:

<div id="showType">
  {{ date }}
</div>

<script>
  let product_id = "{{ $product->id }}";
  let warranty_id = "{{ $warranty->id }}";
  const app = new Vue({
    el: '#app',
    data: {
      dates: [],
      products: [],
      warranties: [],
      date: '',
      product_id: product_id,
      warranty_id: warranty_id,
    },
    watch: {
      date(newDate) {
        const vm = this;
        axios.post('{{ route('products.warranties.save', [$product->id, $warranty->id]) }}', {
          date: newDate,
          product_id: this.product_id,
          warranty_id: this.warranty_id,
        })
        .then(response => {
          console.log(response.data);
          vm.date = response.data;
        })
        .catch(error => {
          console.log(error);
        });
      }
    },
    components: {
      DatePicker: VuePersianDatetimePicker
    }
  });
</script>

In this modified code, we've added the showType element with Vue data binding using {{ date }}. This means that the content of the showType element will always be equal to the date property in the Vue instance's data object.

In the watch property, we've modified the then callback to set the date property to the response data instead of setting the textContent of the showType element. This will automatically update the content of the showType element with the new date value.

Please or to participate in this conversation.