So,I'm giving me first proper look at Vue.js since 2.0. And I'm having a hard time going from filter to computed.
Here is where I'm at (using vue-resource for the API call):
var moviesURL = 'http://localhost/api/movies';
var app = new Vue({
el: '#app',
data: {
liveFilter: '',
movies: ''
},
methods: {
getMovies: function() {
this.$http.get(moviesURL).then(response => {
this.movies = response.body;
}, response => {
console.log(response);
});
}
},
computed: {
filteredMovies: function() {
var self = this
return this.movies.filter(function(movie) {
return movie.indexOf(self.liveFilter) !== -1
});
}
},
created: function() {
this.getMovies();
}
});
And I keep getting those errors:
And I can't really my finger on what I'm doing wrong... Any idea?
You cannot filter over string. In your data movies should be an empty array, not empty string.
Also, be sure that response.body is an array too.
You initiate the movies as an empty string, and a string doesn't have a .find() method. Use an empty array instead
Related
I am using simple Vue app to get data and then present it in a table. Now I created an OK button, where I can change whether one thing is copmlete or not ( similar to todo app).
But how could I save the changes?
This is my code:
declare var Vue: any;
declare var axios: any;
var vm = new Vue({
el: '#appnew',
data: {
message: '',
status: [],
id: '',
},
created: function () {
this.loadQuote();
},
methods: {
loadQuote: function () {
const id = window.location.pathname.split("/").pop();
this.status = 'Loading...';
axios.get('path' + id)
.then(function (response) {
vm.status = response.data;
})
.catch(function (error) {
vm.status = 'An error occured.' + error;
});
},
toggleDone(statu) {
statu.done = !statu.done
},
},
});
Under the toggleDone method I am changing whether it is done or not, so I guess I should add there to also save the changes? Using localStorage? Any ideas anyone?
Thanks if you can help me.
Yes, you'd have to save the value to localStorage, retrieve it, then do what you want with it:
toggleDone(statu) {
statu.done = !statu.done
localStorage.setItem('statu', statu.done);
}
const statu = localStorage.getItem('statu');
I'm sure this is ridiculously simple, but I'm having trouble passing a response from an Axios request to the data object to use elsewhere. It's currently just returning whatever I set as the default in the data object (in this instance, null). Help please! It's greatly appreciated.
My Vue code:
var thing = new Vue({
el: '#el',
data: {
message: null,
},
components: ...
template: ...
methods: {
thing() {
...
}
},
created() {
axios.get('/is-logged')
.then(response => {
if(response.data.status == 'error') {
this.message = response.data.message;
}
})
.catch(e => {
console.log(e);
});
},
mounted() {
if (!this.message) {
console.log(this.message);
this.thing();
}
}
});
The response I get back from is_logged:
{"message":"You are not authorised","status":"error"}
You're logging its value before the AJAX request completes (since the component will be mounted before you get the response from the request in created).
Try putting console.log(this.message) at the end of your then callback.
I am using Vue2. I am getting json data via ajax in my mounted method. I then set that data to a data variable expecting to be able to access it from other methods outside of mounted, but all I get is an empty observable.
Any suggestions/advice? Thanks for the help.
var vm = new Vue({
el: '#app',
data: function () {
return {
allJson: []
};
},
methods: {
updateTableData: function(isActive) {
// cannot access this.allJson here
}
},
mounted: function() {
$.getJSON(Routes.USERS_GET_JSON, function(json) {
this.allJson = json;
});
}
});
I haven't used jQuery in a long, long time, but if I remember correctly you need to explicitly declare the context of this if you wish to use it within the callback, else you get something unexpected. However, I don't know if $.getJSON supports it even though it's a wrapper. So you can try the following:
$.getJSON(Routes.USERS_GET_JSON, function(json) {
this.allJson = json;
}, {
context: this
})
Or you can use .bind off of the function to scope this
$.getJSON(Routes.USERS_GET_JSON, function(json) {
this.allJson = json
}.bind(this))
Or if you're tranpsiling down with babel (which you probably are) you can use fat arrow syntax:
$.getJSON(Routes.USERS_GET_JSON)
.done( (json) => {
this.allJson = json
})
Or you can just alias this before the $.getJSON
let _self = this
$.getJSON(Routes.USERS_GET_JSON, function(json) {
_self.allJson = json
})
My guess is that this is not bound to your vue instance inside the callback function. Try the following
var vm = new Vue({
el: '#app',
data: function () {
return {
allJson: []
};
},
methods: {
updateTableData: function(isActive) {
// cannot access this.allJson here
}
},
mounted: function() {
const self = this;
$.getJSON(Routes.USERS_GET_JSON, function(json) {
self.allJson = json;
});
}
});
I'm trying to return some data using nextTick() in vuejs 2 as following
getProperty() {
this.$nextTick(function() {
return 'hello';
});
}
It doesn't work. Any clue?
this.$nextTick this function does not return anything; it just executes your callback after refreshing all new data.
so if you want to set some flag or data you can use modal/variable for that.
new Vue({
data: {
msg: 'hello'
},
methods: {
someTask: function () {
this.msg = 'hello next tick';
this.$nextTick(function() {
this.printVar();
});
},
printVar: function() {
// here this variable will be changed to latest value
// or call another function where this value is used
// this.anotherFunction();
console.log(this.msg);
}
},
ready: function () {
this.someTask();
}
});
or just let us know what you want to do with that so we can provide you better answer.
I have a directive that needs to update data in a Vue.component. How do I set the value? Here is my code:
Vue.directive('loggedin', function(value) {
console.log('loggedin = ' + value);
vm.$set('loggedIn', value);
});
vm.$set('loggedIn', value) does not work. I get the following error:
Uncaught TypeError: Cannot read property '$set' of undefined
var ck = Vue.component('checkout', {
template: '#checkout-template',
props: ['list'],
data: function() {
return {
loggedIn: '',
billingAddr: [],
shippingAddr: [],
}
},
});
The value being passed is 'true' or 'false'.
EDIT
I need to bind <div v-loggedin="true"></div> to my data value in the component and set that to 'true'. I do not need two-way binding.
Maybe I'm going about this the wrong way. Basically, I get a value for loggedin from the server and need to set my loggedIn value to true or false in the data on the component.
I'm not sure how you are using your directive, so I'm just going to make an assumption. Please correct me if I'm wrong.
Have a look at the twoWay property (you would probably need to use the object syntax though):
Vue.directive('loggedin', {
twoWay: true, // Setup the two way binding
bind: function () {
},
update: function (newValue) {
console.log('loggedin = ' + value);
this.set(newValue); // Set the new value for the instance here
},
unbind: function () {
}
});
Then you can use the directive like this (loggedIn is the property you want to write to afterwards, and which serves as the initial value as well):
<yourelement v-loggedin="loggedIn">...</yourelement>
Regarding your edit
Since you only want to pass data from your server to the component, you're much better of just using props:
var ck = Vue.component('checkout', {
template: '#checkout-template',
props: ['list', 'loggedIn'],
data: function() {
return {
billingAddr: [],
shippingAddr: [],
}
},
});
And then when using your component, pass it:
<checkout :loggedIn="true">
...
</checkout>
I have decided to go another route. There had to be a simpler way of doing this. So, here is what I did.
I am checking if a user is logged in by doing an ajax request through the 'created' function on the vm. I then update the auth variable in the vm with true or false.
var vm = new Vue({
el: 'body',
data: {
auth: false,
},
methods: {
getData: function() {
this.$http.get('{!! url('api/check-for-auth') !!}').then(function(response) {
this.auth = response.data;
}.bind(this));
},
},
created: function() {
this.getData();
},
});
In the component I created a props item called 'auth' and bound it to the auth data on the vm.
var ck = Vue.component('checkout', {
template: '#checkout-template',
props: ['list', 'auth'],
data: function() {
return {
user: [],
billingAddr: [],
shippingAddr: [],
}
},
});
And my component
<checkout :list.sync="cartItems" :auth.sync="auth"></checkout>
Thanks everyone for your help.