I have been trying to get these piece of code to work but I cannot find the right solution. Please can someone tell me why this works (loads data on load) but new records are not shown automatically.
<script>
Vue.component('comments',{
template: '#comment-vue-template',
data:() => {
return {
comments: []
}
},
created: function(comments) {
this.$http.get('/comments')
.then(response => {
this.comments = response.body
});
setTimeout(1000);
},
methods: {
getComments: function(comments) {
this.$http.get('/comments')
then(response => {
this.comments = response.body
})
},
},
});
new Vue({
el:'#app',
});
</script>
and this code below does not work at all :-
<script>
Vue.component('comments',{
template: '#comment-vue-template',
data:() => {
return {
comments: []
}
},
created: function(comments) {
this.getComments();
},
methods: {
getComments: function(comments) {
this.$http.get('/comments')
then(response => {
this.comments = response.body
});
setTimeout(this.getComments,1000);
},
},
});
new Vue({
el:'#app',
});
</script>
Thanks in advance
Found my mistake
<script>
Vue.component('comments',{
template: '#comment-vue-template',
data:() => {
return {
comments: []
}
},
created: function() {
this.getComments();
},
methods: {
getComments() {
this.$http.get('/comments').then(response => {
this.comments = response.body
});
setTimeout(this.getComments,1000);
}
}
});
new Vue({
el:'#app',
});
</script>
Related
I've tried many different ways to do this with both alert() and simple if-else statements, and even what is at this link: https://v2.vuejs.org/v2/cookbook/form-validation.html
But nothing works! What am I doing wrong?
What is in my index.html:
<div id="app">
<div class = "addTask">
<h1>A List of Tasks</h1>
<p v-show="activeItems.length === 0">You are done with all your tasks! Celebrate!</p>
<form #submit.prevent="addItem">
<input type="text" v-model="title">
<button type="submit">+</button>
</form>
</div>
This is what I have in scripts.js:
var app = new Vue({
el: '#app',
data () {
return {
// errors: [],
items: [{
userId: 0,
id: 0,
title: "",
completed: false,
}],
title: '',
show: 'all',
}
},
// Using axios to asynchrously query the API
mounted () {
axios
.get("https://jsonplaceholder.typicode.com/todos")
.then(response => this.items = response.data)
},
computed: {
activeItems() {
this.saveItems;
return this.items.filter(item => {
return !item.completed;
});
},
filteredItems() {
// An active state denotes the task is not yet completed
if (this.show === 'active')
return this.items.filter(item => {
return !item.completed;
});
if (this.show === 'completed')
return this.items.filter(item => {
return item.completed;
});
// This makes it so added tasks go to the top, not bottom
return this.items.reverse();
},
},
methods: {
addItem() {
if(this.items != 0) {
this.items.push({
title: this.title,
completed: false
})
this.title = "";
}
else {
alert("Please enter a task.")
}
Based on your code, you should declare a property called title in the data function and check if title is empty or not in addItem method.
var app = new Vue({
el: '#app',
data () {
return {
// errors: [],
title: '', // add this property in data function
items: [{
userId: 0,
id: 0,
title: "",
completed: false,
}],
title: '',
show: 'all',
}
},
// Using axios to asynchrously query the API
mounted () {
axios
.get("https://jsonplaceholder.typicode.com/todos")
.then(response => this.items = response.data)
},
computed: {
activeItems() {
this.saveItems;
return this.items.filter(item => {
return !item.completed;
});
},
filteredItems() {
// An active state denotes the task is not yet completed
if (this.show === 'active')
return this.items.filter(item => {
return !item.completed;
});
if (this.show === 'completed')
return this.items.filter(item => {
return item.completed;
});
// This makes it so added tasks go to the top, not bottom
return this.items.reverse();
},
},
methods: {
addItem() {
if(this.title !== '') { //check if `title` is empty or not
this.items.push({
title: this.title,
completed: false
})
this.title = "";
}
else {
alert("Please enter a task.")
}
I created an example in Stackblitz. You can also view the example directly by clicking here
I have an API which returns all the currency rate, i used a function getRate() on mounted but rate['usd'] is undefined, if i call the function again on that page it returns the actual data, i tried beforeCreated beforeMounted but they are not working, how to make the data reactive on load or am i doing something wrong?
<template>
<span v-text="rate['usd']"></span>
</template>
<script>
data() {
return {
rate: null
}
},
methods: {
getRate() {
this.$vs.loading()
this.$http.post('wallet/rate' ,[])
.then(response => {
for(let key in response.data.data.data){
this.rate[response.data.data.data[key].name] = response.data.data.data[key].value
}
this.$vs.loading.close()
})
.catch(error => {
this.$vs.loading.close()
})
},
},
mounted() {
this.getRate()
}
</script>
Does this work?
<template>
<span v-text="rate.usd"></span>
</template>
<script>
data() {
return {
rate: null
}
},
methods: {
getRate() {
const rate = {}
this.$vs.loading()
this.$http.post('wallet/rate' ,[])
.then(response => {
for(let key in response.data.data.data){
rate[response.data.data.data[key].name] = response.data.data.data[key].value
}
this.$vs.loading.close()
this.rate = rate
})
.catch(error => {
this.$vs.loading.close()
})
},
},
mounted() {
this.getRage()
}
</script>
I am building a new app with vuejs 2 and got that error
ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Customers.vue
Module build failed: SyntaxError: C:/Users/Men'm Elkatan/projects/vuecustomers/src/components/Customers.vue: this is a reserved word (17:6)
I used "this" before but didn't get that error expect today.
Here's my code
<script>
export default {
name: 'customers',
data () {
return {
customers: []
}
},
methods: {
fetchCustomers({
this.$http.get('http://slimapp/api/customers')
.then(function(response) {
this.customers = JSON.parse(response.body);
});
})
},
created: function(){
this.fetchCustomers();
}
}
</script>
Please!! help
Your syntax was wrong. It has to be fetchCustomers() { ... }:
<script>
export default {
name: 'customers',
data () {
return {
customers: []
}
},
methods: {
fetchCustomers() {
this.$http.get('http://slimapp/api/customers')
.then(function(response) {
this.customers = JSON.parse(response.body);
});
}
},
created: function(){
this.fetchCustomers();
}
}
</script>
Excuse me, my json data have two array.
I want to filter this json data(banner_img:['img']) with Vue.js.
But Analysis Json data is some problems..
Json data
[{"id":10,"banner":"AIR","banner_img":[{"id":1,"img":"air_1.png","banner_id":10},{"id":2,"img":"air_2.png","banner_id":10}]},
{"id":11,"banner":"HOT","banner_img":[{"id":3,"img":"hot_1.png","banner_id":11},{"id":4,"img":"hot_2.png","banner_id":11}]},
{"id":12,"banner":"NEW","banner_img":[{"id":5,"img":"new_1.png","banner_id":12},{"id":6,"img":"new_2.png","banner_id":12}]}]
Vue.js
var app = new Vue({
el: '#app',
data: {
banner:[],
search:'',
},
methods: {
getBannerData: function() {
axios.get('/case/ajax/33').then(response => {
this.banner = response.data.banner;
});
},
},
mounted: function() {
this.getBannerData();
},
computed: {
filteredList() {
return this.banner(value => {
return value.banner_img.filter(bannerImg => {
return bannerImg.img.toLowerCase().includes(this.search.toLowerCase());
});
})
}
}
});
HTML
<input type="text" name="ImgFilter" v-model="search">
<div v-for="value in filteredList">
<img v-for="imgs in value.banner_img" :src="imgs.img" height="100">
</div>
Then I try this filteredList
return value.banner_img.filter(bannerImg => {
return bannerImg.img.toLowerCase().includes(this.search.toLowerCase());
});
but is not work..
Please give me some advices～！
Try this one:
filterList:function()(
var that = this;
return this.banner.filter(function(item) {
return item.banner_img && item.banner_img.some(function(img) {
return img.img && img.img.toLowerCase() === that.search.toLowerCase();
});
});
)
I've got a question like in the title
How to stop mounting the component in <router-view> until receive a data from server or how to get the data before the component is mounted to <router-view>
My files:
1st main.js
new Vue({
el: '#app',
router,
components: { Login, Start },
data: function(){
return{
info: null,
}
},
methods:{
bef: function(){
this.$http.get('xxx').then(function(response){
return response.body
});
}
},
beforeMount(){
this.info= this.bef()
}
})
2nd component file Comp.vue
export default{
name: 'start',
data(){
return{
}
},
beforeMount(){
console.log(this.$parent.info)
}
}
how to do it properly to get not null value, but response from the server?
Thank you in advance
resolved with:
checkLogged: function() {
return new Promise((resolve,reject) => {
this.$http.get('xxx').then(response => {
if (response.body == 1) {
resolve(true);
} else {
resolve(false);
}
}, response => {
reject('connection failure');
});
});
},
and in 2nd file:
this.$root.checkLogged().then((response) => {
if(response){
this.logged = true
}else{
router.push("/")
}
})