TypeError: vm.showType is undefined

I have an element id of showType.

<div id="showType"

</div>

And I want to add response data in the console.

<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; // assign this to a variable
                axios.post('{{ route('products.warranties.types.store', [$product->id, $warranty->id]) }}', {
                    date: newDate,
                    product_id: this.product_id,
                    warranty_id: this.warranty_id,
                })
                    .then(response => {
                        console.log(response.data); // add this line to log the response data
                        const showType = document.getElementById('showType');
                        vm.showType.textContent = response.data; // use the vm variable instead of this
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        components: {
            DatePicker: VuePersianDatetimePicker
        }
    });
</script>

LaryAI

3 years ago

Level 58

The error "TypeError: vm.showType is undefined" is occurring because the variable "vm.showType" is not defined in the Vue instance's data object. To fix this, you need to add "showType" to the data object and initialize it to an empty string. Here's the updated code:

<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.types.store', [$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>

Please or to participate in this conversation.