Search
Question:
Why is the Vuejs form not showing up?

Problem

I tried to create a Products form using VueJS, but when I refresh my localhost, it's just a blank page. >the page


I have turned off XAMPP and turned it on again but still, it's just a blank page that shows

Here's my code:


ApiCalling.vue:


<template>

    <div class="api-calling container mt-5">

        <h1>Create Product</h1>

        <div class="form-group">

            <label>Name</label>

            <input v-model="product.name" type="text" class="form-control" placeholder="Name...">

        </div>

        <div class="form-group">

            <label>Price</label>

            <input v-model="product.price" type="text" class="form-control" placeholder="Price...">

        </div>

        <button class="btn btn-primary" @click="createProduct">Create</button>

    </div>

</template>


<script>

    export default {

        data() {

            return {

                product: {

                    name: '',

                    price: 0

                }

            }

        },

        methods: {

            async createProduct() {

                try {

                    const response = await axios.post('/products', {

                      name: this.product.name,

                      price: this.product.pric

                    })

                    console.log(response.data.product)

                } catch (error) {

                    console.log(error)

                }

            }

        }

    }

</script>


app.js :


import './bootstrap';

import { createApp } from 'vue';



const app = createApp({});


import ExampleComponent from './components/ExampleComponent.vue';

app.component('example-component', ExampleComponent);



app.mount('#app');

Vue.component('api-calling', require('./components/ApiCalling.vue').default) 


welcome.blade.php :


<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">


        <title>Laravel</title>

        </style>


        <link rel="stylesheet" href="/css/app.css">

       

    </head>

    <body>

        <div id="app">

            <api-calling></api-calling>

        </div>

        <script src="/js/app.js"></script>

      

    </body>

</html>


what did I do wrong? or is it am I using codes that only work on older versions of Laravel?


Solution

You have some issues in your code:


price: this.product.pric


should be:


price: this.product.price


in app.js you are mixing vue2 and vue3, I think that you want to use vue3, so it should look like:


import './bootstrap';

import { createApp } from 'vue';


import ExampleComponent from './components/ExampleComponent.vue';

import ApiCalling from './components/ApiCalling.vue';


const app = createApp({});


app.component('example-component', ExampleComponent);

app.component('api-calling', ApiCalling);


app.mount('#app');


And finally:


In your ApiCalling.vue component, you are using Axios but it doesn't seem to be imported. You need to import Axios at the top of your script:


import axios from 'axios';


Suggested blog

>How to get the date and time and display it in a defineProps in Vuejs?

>Why logged user object is all strings in Vuejs and Laravel 10?

>What is meant by progressive framework?

>How can I replace this.$parent in composition API in Vuejs?

>How do I fix an invalid route component in the new VueJs Project?

>How to get all the rows selected in Vuejs?

>How to set up a dynamic grid based on flex or grid in Vuejs?

>Create a project using Vue.js: Beginners Guide

>Authentication with Vue 3 and Firebase

>Plugins and Presets for Vuejs project

>Create a Vue.js application with CLI Services

>Create a project using Vue.js: Beginners Guide

>Create Vue.js application API


Nisha Patel

Nisha Patel

Submit
0 Answers
Top Questions
16-10-2023

How to watch for event changes on a tailwind listbox component with Vuejs?

16-10-2023

Why VueJS / Vuetify error rendering a vTable component?

16-10-2023

How to set up a dynamic grid based on flex or grid in Vuejs?

13-10-2023

How can I pass an Object as param to the router in VueJS 3 (Composition API + script setup)?

13-10-2023

Why VueJs console.log giving the correct value but not updating in the template?

Related Questions

What is meant by progressive framework?
img
Why Infinite scrolling in Vuejs is not working?
img
How to set up a dynamic grid based on flex or grid in Vuejs?
img
Authentication with Vue 3 and Firebase
img
Create a Vue.js application with CLI Services
img