I am working on a vuejs app , and I am trying to use server side rendering, but I am having a problem with the rendering, but I am having this error when I start my server.
[HPM] Error occurred while trying to proxy request /main.js from localhost:8080 to http://localhost:8081 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
I can see the content of server page localhost:8080, but the client page in localhost:8081 cannot be reached.
I am using this code in Github I am testing with this vue component:
import axios from 'axios';
export default {
name: 'Blog',
data () {
return {
blog: null,
error: null
}
},
beforeCreate: function() {
axios({ method: "GET", "url": "path to api" }).then(result => {
this.blog = result.data.blogs[0];
},
error => {
this.error = error;
});
},
mounted () {
axios({ method: "GET", "url": "path to api" }).then(result => {
this.blog = result.data.blogs[0];
},
error => {
this.error = error;
});
}
}
<template>
<div class="Blog">
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-title">
<div class="row">
<div class="col-md-9 col-xs-12">
<h2><span>{{ blog.title }}</span></h2>
<!-- Other data here! -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
for the server page, I just can see some css but I cannot see the data that I get from axios! But I see that the blog property contains the data, it's just not displayed in the page. Any help would be very appreciated.
Related
Currently learning Vue and Axios, and i'm trying to get data from an API and display it within an HTML card, but it seems that it tries to display the data before getting it from the API and then nothing renders.
<script type="text/javascript">
const {createApp} = Vue;
const data = null;
const error = null;
const app = createApp({
data(){
return{
movieID: localStorage.getItem("movieID"),
movieDetail: null
}
},
methods:{
getMovieDetail(){
var config = {
method: 'get',
url: 'https://api.themoviedb.org/3/movie/'+localStorage.getItem("movieID"),
headers: {
'Authorization': 'Bearer'
}
};
axios(config);
app.movieDetail = respuesta.data;
document.getElementById("tituloPeli").innerHTML = app.movieDetail.title
.then(function (response) {
app.movieDetail = response.data;
})
.catch(function (error) {
console.log(error);
});
}
},
mounted(){
this.getMovieDetail();
}
}).mount("#contenedor");
</script>
<div id="contenedor">
<div class="container-xxl my-4">
<h1>Data from movie with ID {{movieID}}</h1>
</div>
<div class="container">
<div class="row align-items-start">
<div class="col-12">
<div class="card my-2">
<img class="card-img-top" :src="'https://image.tmdb.org/t/p/w600_and_h900_bestv2' + movieDetail.poster_path">
<div class="card-body">
<h6 class="card-title">
{{movieDetail.title}}
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
Highly appreciated if you could help me, thank u so much
The key is to not render the data until it's ready. This is called conditional rendering and can be done using the v-if directive
<h6 v-if="movieDetail?.title" class="card-title">
{{movieDetail.title}}
</h6>
Along with standard javascript optional chaining you can guarantee an object and it's properties are all defined before rendering it in your template.
I'm making a chat system with socket.io and VueJS, so customers can talk to an admin. But when a client connects to the server, the variable in the data() updates. But the template is not updating.
Here is my code:
<template>
<div>
<div class="chats" id="chat">
<div class="chat" v-for="chat in chats">
<b>{{ chat.clientName }}</b>
<p>ID: {{ chat.clientID }}</p>
<div class="jens-button">
<img src="/icons/chat-bubble.svg">
</div>
</div>
</div>
</div>
</template>
<script>
let io = require('socket.io-client/dist/socket.io.js');
let socket = io('http://127.0.0.1:3000');
export default {
name: 'Chats',
data() {
return {
chats: [],
}
},
mounted() {
this.getClients();
this.updateClients();
},
methods: {
getClients() {
socket.emit('get clients', true);
},
updateClients() {
socket.on('update clients', (clients) => {
this.chats = clients;
console.log(this.chats);
});
}
},
}
</script>
Then I get this, the box is empty:
But I need to get this, this will only appear when I force reload the page. I don't know what I'm doing wrong...
Oke, I've found out where the problem was, in another component I used plain javascript which brokes the whole reactive stuff.
In config/index.js i config like this
proxyTable: {
'/api': {
target: 'http://localhost:44322',
changeOrigin: true
}
},
And this code i call get method.
<template>
<div>
<ul v-if="posts && posts.length">
<li v-for="post of posts" v-bind:key="post.employeeId">
<p><strong>{{post.firstName}}</strong></p>
<p>{{post.lastName}}</p>
<p>{{post.phoneNumber}}</p>
<p>{{post.dateOfBirth}}</p>
<p>{{post.email}}</p>
</li>
</ul>
<ul v-if="errors && errors.length">
<li v-for="error of errors" v-bind:key="error.id">
{{error.message}}
</li>
</ul>
</div>
</template>
<script>
import Axios from 'axios'
export default {
name: 'Axios',
data () {
return {
posts: [],
errors: []
}
},
// Fetches posts when the component is created.
created () {
Axios.get('/api/employee')
.then(response => {
// JSON responses are automatically parsed.
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
console.log(e)
})
}
}
</script>
I want when i call
http://localhost:8080/#/axios
the client call to backend :
http://localhost:44322/api/employee
But nothing happen, i see in header of request the url is :
localhost:8080
i do flow the link of vuejs: https://vuejs-templates.github.io/webpack/proxy.html ,part API Proxying During Development. Any idea for this?
Thanks!!
you would see the request url as http://localhost:8080/api/employee in the browser
and finally the request will be transferd to http://localhost: 44322/api/employee which you won't see in network panel of your browser
Network Error when trigger nuxt-link after refresh same page its work fine
Here is Template
<div class="col-lg-3" v-for="(video, index) in videos" :key="index">
<nuxt-link :to="/video/ + video.id">
<img :src="video.image" width="100%">
<div class="card">
<div class="card-body">
<h1 class="title">{{ video.title }}</h1>
</div>
</div>
</nuxt-link>
</div>
scripts
export default {
layout: 'default',
asyncData({ req, params }) {
// We can return a Promise instead of calling the callback
return axios.get('http://localhost:8000/getVideos')
.then((res) => {
return { videos: res.data.data }
})
}
}
Here is Next Page Link
<script>
import axios from 'axios'
export default{
layout: 'default',
asyncData({ req, params }) {
// We can return a Promise instead of calling the callback
return axios.get(`http://localhost:8000/video/${params.id}`)
.then((res) => {
return { video: res.data.video , relatedVideos: res.data.relatedVideos }
})
},
}
</script>
and This is the Error what is and facing
after refresh page it works fine
after install > https://github.com/barryvdh/laravel-cors package in my laravel backend everything working fine
Axios setting response data in Vue component variable but variable not displaying data on the browser. We can see data on console but when I display, Browser shows me nothing. Data are in JSON Format.
Snapshot:
Output:
<template>
<div class="card">
<div class="card-header">Subject</div>
<div class="card-body" >
<!-- <ul class="list-group">
<li class="list-group-item" :key = "message.id" v-for = "message in messages"> {{ message.subject}}</li>
</ul> -->
{{messages}}
</div>
</div>
</template>
<script>
export default{
name: 'subject-component',
data () {
return {
messages:{}
}
},
mounted () {
},
created(){
axios.get('http://127.0.0.1:8000/subject/get')
.then(response => {this.messages = response.data})
.catch((error) => console.log(error));
}
}
</script>
By setting up the project again, this issue has been resolved. And again I used the same approach for axios request like.
axios.get('http://127.0.0.1:8000/get/subjects')
.then((response)=>(this.subjects = response.data))
.catch(function(error){console.log(error)});
Thank you all for your effort.