I am having trouble getting my action to register both values that I pass to it from the front end. I know that the action only expects two params so I need to pass it as an object or an array but I keep getting undefined when I log out the values.
My action:
toggleMarkImportant: ({commit, state}, {row_id, bool}) => {
console.log('fireball', row_id, bool)
// axios.post('http://localhost:5050/api/important', {row_id, bool}).then(res=>{
// axios.get('http://localhost:5050/api/get-table-data').then(res=>{
// commit('SET_TABLE_ROWS', {tableRows: res.data})
// })
// })
}
Where I call it and pass in values:
<td v-if="row.important" class='star-box'>
<i class="fas fa-star" #click="toggleMarkImportant({row_id: row.row_id, bool: true})"></i>
</td>
I am able to get just the id if that's all I pass in so I know that the data is there and is correct. PLEASE HELP!!!
Related
I am using VueJS2 and having the following issue when returning API data from a function:
Uncaught (in promise) TypeError: Cannot read property 'P_shortName' of undefined
While the UI does render the data successfully after a while, I get annoying console log output above.
In template I have:
<td>
{{ registerName(country.registerIdentifier_FK) }}
</td>
And the registerName() looks like so:
methods: {
async registerName(id) {
const register = this.registers.find(
register => id === register.registerIdentifier_PK
)
return register.P_shortName
},
}
What can I do to mitigate this error?
Try it.
And I didn't see the need to use async here.
registerName(id) {
const register = this.registers.find(
(register) => id === register.registerIdentifier_PK
);
return register ? register.P_shortName : null;
}
Beginner to JS and VueCLI so I'll try to explain as best as I can. I'm using Express as my back-end.
I'm trying to change the boolean in my array of objects on click. I'm able to accomplish that but when I click on a different list item in my v-for loop it's flipping the boolean in all other indexes of my array. Here's my code:
Express: /routes:
// fake data store
const tasks = [
{ id: 1, task: 't1', completed: false},
{ id: 2, task: 't2', completed: false},
{ id: 3, task: 't3', completed: false}
];
/**
* GET handler for /tasks route
* #returns {Array.<{id: Number, task: String, completed: Boolean}>} array of task objects
*/
router.get('/', (req, res) => {
res.send(tasks);
});
Webapp:
/**
* GET /tasks
* #returns Promise => {Array.<{id: Number, task: String, completed: Boolean}>} array of task objects
*/
export function getTasks() {
return request('tasks');
}
and now my Vue component:
<template>
<div id="tasks">
<h2>Movies to Add</h2>
<ul class="todo-list">
<li v-for='task in tasks' :id="task.id" v-on:click="completeMovie($event)" :key='task.id' class="todo-list__li">
<input class="todo-list__input" type="checkbox" :name='task.task' :id="task.task">
<div class="todo-list__checkbox">
<span class="todo-list__checkbox-inner"><i></i></span>
</div>
<label :for='task.task'>{{ task.task }}</label>
</li>
</ul>
</div>
</template>
<script>
import {getTasks} from './../../services/tasks';
export default {
name: 'TaskList',
data: function() {
return {
tasks: []
};
},
created: function() {
getTasks()
.then(res => this.tasks = res);
},
methods: {
completeMovie: function (event) {
var taskId = event.currentTarget.id -1;
getTasks()
.then((res) => {
this.tasks = res;
res[taskId].completed = !res[taskId].completed;
});
}
}
}
</script>
So when I click on my first list item it changes the Task: t1 to True but if I click on the second list item it changes t1 back to False and t2 to True. I'm not sure exactly what I'm doing wrong. I'm not even sure this is the best way to do this. My main issue is I'm not sure why it's happening.
Any help is much appreciated!
You're probably over-complicating this.
All you need is
<li v-for="task in tasks" :key="task.id"
#click="task.completed = !task.completed"
class="todo-list__li">
Demo ~ https://jsfiddle.net/xy1q0auL/2/
There's no (obvious) need to re-fetch the tasks every time you click on one. This is why your previous changes are reset; it's because you overwrite all the data with the unmodified values from getTasks().
When completeMovie() is called, you send an HTTP request to your server that is gonna send you back unaltered task list. I don't understand clearly what's you're trying to achieve but your callback in the promise has no sens. In the callback you reaffect the "tasks" list in your vue :
In this case, here is the event timeline you have to do :
When client page is loaded, Vue Initialized, the vue component calls your webservice to get the task list then print it.
Then when I click on a task, you have to make a another HTTP call to your webservice (on another route), that will update the task list and will return it.
Then in the call of your vue component you reaffect the new task list.
You can make its simply:
<li v-for='task in tasks' :id="task.id" v-on:click="completeMovie(task.id)" :key='task.id' class="todo-list__li">
<input class="todo-list__input" type="checkbox" :name='task.task' :id="task.task">
<div class="todo-list__checkbox">
<span class="todo-list__checkbox-inner"><i></i></span>
</div>
<label :for='task.task'>{{ task.task }}</label>
</li>
Ans for the method
completeMovie: function ($taskId) {
this.tasks[$taskId].completed = !this.tasks[$taskId].completed;
}
}
Hi I'm trying to get the last four blog posts from contentful api in angular 5. I've created a service and I'm capable of retrieving 1 with the following code.
getContent(contentId) {
const promise = this.client.getEntry(contentId);
return Observable.fromPromise(promise).map(entry => entry.fields);
};
I would like to return it as an observable, however if returned as a promise, I would like to know how to work with a promise in the component.ts and -.html.
getLastByCount(number) {
var promise = this.client.getEntries({
limit: number
})
...
}
If i do the same for getting multiple entries I get a 'PromiseObservable', which contains a 'promise: ZoneAwarePromise'. In which it has 'items: Array', where object are as when i log the single entry. How do I work which such objects?
Edited:
I've done as suggested by: Stephan
getLastByCount(number) {
var promise = this.client.getEntries({
limit: number
})
return Observable.fromPromise(promise).mergeMap((collection) => (
Observable.from(collection.items)
))
}
And in my component.ts in OnInit()
posts$: Observable<any>;
this.posts$ = this.contentfulService.getLastByCount(4).map(entry => entry.fields);
In my component.html, i do this when displaying the one entry
<div *ngIf="post$ | async as post">
<h1>{{ post.headline }}</h1>
<time>Published on {{ post.published | date: 'fullDate' }}</time>
<hr>-->
</div>
I try this when using the collection:
<div *ngIf="posts$ | async as posts">
<ul>
<li class="post" *ngFor="let post of posts$ | async">
<h1>{{ post.headline }}</h1>
<time>Published on {{ post.published | date: 'fullDate' }}</time>
<hr>
</li>
</ul>
</div>
I get this error: Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
What you probably want is an Observable that emits every single item of the collection that the Contentful client returns.
To do so, you can use the mergeMap functionality:
Observable
.fromPromise(promise)
.mergeMap((collection) => (
Rx.Observable.from(collection.items)
))
Now you can work with every item in the observable sequence as with the single entry above, e.g. you can
.map(entry => entry.fields)
EDIT:
Turns out Angular expects you to have an Observable<Entry[]>, instead of Observable<Entry>, so the proper way is:
Observable
.fromPromise(promise)
.map((collection) => collection.items)
i'm working on a vue file and have a form :
<div class="input-group">
<span class="input-group-addon">Montant</span>
<input type="number" class="form-control" v-model="amount" v-bind:value="pattern['value']"]>
</div>
my tab pattern is loaded like that :
var request = $.ajax({
url: '{{ path ('home') }}promos/pattern/'+value,
})
request.success(function(data){
if(data['pattern']==='yes'){
this.pattern=data[0];
alert(this.pattern['value']);
}
})
and my instance :
var instance = new Vue({
el: "#General",
data: {
[...]
pattern: []
}
and the request is made evertyime i do 'action a'. I have the right alert with the value i want everytime i do 'action a' but the input stays at 0 and won't dynamically change.
Something is wrong with your code. Firstly, let's look at your ajax request:
request.success(function(data){
if(data['pattern']==='yes'){
this.pattern=data[0];
alert(this.pattern['value']);
}
})
What is the form of your data response? Because you are checking something with data['pattern'], and then you are trying to associate to this.pattern something that you call data[0]
Then, as stated in #thanksd answer, you are referencing a wrong this in your ajax callback, you need to create a self variable:
var self = this
var request = $.ajax({
url: '{{ path ('home') }}promos/pattern/'+value,
})
request.success(function(data){
if(data['pattern']==='yes'){
self.pattern=data[0];
alert(this.pattern['value']);
}
})
Finally, you write:
<input type="number" class="form-control" v-model="amount" v-bind:value="pattern['value']"]>
So there are a few mistakes here. Firstly, you have a ] at the end of the line that has nothing to do here.
Secondly, you are using v-bind:value, this is not something that is going to be responsive. If you want this input to be responsive, you should use v-model and set the value of amount when you want to change the input value.
Hope this helps
Three things:
The this in your success handler is not referencing the Vue instance. You need to set a reference outside the scope of the handler and use that instead.
You can't chain a success callback to jQuery's ajax method in the first place. It's defined as a property in the parameter object passed to the call. (Maybe you copied code over wrong?)
You need to get rid of v-model="amount" if you want the input's value to reflect the value bound by v-bind:value="pattern"
Your code should look like this:
let self = this; // set a reference to the Vue instance outside the callback scope
var request = $.ajax({
url: '{{ path ('home') }}promos/pattern/'+value,
success: function(data) { // success handler should go in the parameter object
if (data['pattern']==='yes') {
self.pattern=data[0];
alert(this.pattern['value']);
}
}
})
I'm using Vue JS 2.0 and this is a table I'm trying to display. Everything displays properly initially but when I update(in a method called editPlayerStat) editedPlayers[any-Player-Id], it doesn't update the interpolated value in the respective small tag.
At the editPlayerStat() I check to see if editedPlayers[any-Player-Id] is changing properly and it is. But for some reason it isn't getting updated in the small tag. Also, in the span tag's v-if doesn't update and has the same problem.
While in the same method editPlayerStat(), I manually update player.stats.month.goals you see interpolated, to see if also has the same problem and IT DOESN'T. It works just fine.
What am I doing wrong?
<tr v-if="showMonth" v-for="player in players">
<td><input type="checkbox"></td>
<td>{{ player.name }}</td>
<td><a #click.prevent="editPlayerStat(player._id,'goals',false)" href=""><i class="fa fa-arrow-down"></i></a>
{{ player.stats.month.goals }}
<a #click.prevent="editPlayerStat(player._id,'goals',true)" href=""><i class="fa fa-arrow-up"></i></a>
<span id="changed"> <small>({{ editedPlayers[player._id].stats.goals }})</small></span>
</td>
<td><a #click.prevent="editPlayerStat(player._id,'assists',false)" href=""><i class="fa fa-arrow-down"></i></a>
{{ player.stats.month.assists }}
<a #click.prevent="editPlayerStat(player._id,'assists',true)" href=""><i class="fa fa-arrow-up"></i></a>
<span id="changed" v-if="editedPlayers[player._id].stats.assists > 0"> <small>({{ editedPlayers[player._id].stats.assists }})</small></span>
</td>
</tr>
This is my editPlayerStat() method:
editPlayerStat(id, type, isIncrease) {
console.log('editPlayerStat...');
console.log('editedPlayers[player._id].stats.goals...' + this.editedPlayers[id].stats.goals );
if(isIncrease) {
console.log('increase');
this.editedPlayers[id].stats[type]++;
this.editedPlayers[id].isEdited = true;
} else if(!isIncrease && this.editedPlayers[id].stats[type] > 0) {
console.log('decrease');
this.editedPlayers[id].stats[type]--;
this.editedPlayers[id].isEdited = true;
}
}
ANOTHER instance:
I use v-model on an input and display the interpolated value beside and it updates just fine when I update the input tag value. But when I 'watch' for changes in the object player, the watch function doesn't run except for the first time.
<input class="form-control" id="name" placeholder="Name" type="text" v-model="player.name">{{ player.name }}
watch: {
player: function(player) {
console.log('from watch... '+JSON.stringify(player));
}
},
methods: {
getPlayerInfo() {
var vm = this;
axios.get('http://localhost:3000/admin/players/info/'+'5847a093a5e13203a4d0455f')
.then(function (response) {
vm.player = response.data;
console.log(response);
console.log(JSON.stringify(vm.player));
console.log('showForm: ' + vm.showForm);
})
.catch(function (error) {
console.log(error);
});
},
created: {
this.getPlayerInfo();
}
Output:
Object { data: Object, status: 200, statusText: "OK", headers: Object, config: Object, request: XMLHttpRequest }
{"_id":"5847a093a5e13203a4d0455f","name":"Michael","age":25,"dateOfBirth":"03-04-1998","phone":7987997799,"image":"imgur::djnwkndkjnkn","preferredFoot":"Right","isActive":true,"positions":["CB","RB","RW"]}
showForm: true
from watch... {"_id":"5847a093a5e13203a4d0455f","name":"Michael","age":25,"dateOfBirth":"03-04-1998","phone":7987997799,"image":"imgur::djnwkndkjnkn","preferredFoot":"Right","isActive":true,"positions":["CB","RB","RW"]}
As you can see, even though the interpolated player.name is updated when I edit the value in the input tag, the watch function for player property doesn't run except for that first time when player was initialized with an Object.
Thanks to #vbranden and participants in an issue I raised here. So here's what was going wrong.
I was running into this behavior in Vue 2.0, which according to the documentation, "cannot detect property addition or deletion". You will run into this sooner or later.
The thing was that, I was adding properties to an Object directly (or as I thought 'string indexed array' values to an array. Note: also see issue; javascript doesn't allow associative arrays) and Vue couldn't watch for changes in it due to this caveat.
Solution: Instead of directly assigning properties to an Object, you need to use Vue.set() or this.$set() to assign them. This allows Vue to track for changes in them.
Original Problem: fiddle
editedPlayers: []
this.editedPlayers['someID'] = { name: 'John', stats: { goals: 10, assists: 10 }};
this.editedPlayers['someOtherID'] = { name: 'Flint', stats: { goals: 10, assists: 10 }};
Solution: fiddle
editedPlayers: {}
Vue.set(this.editedPlayers, 'someID', { name: 'John', stats: { goals: 10, assists: 10 }});
Vue.set(this.editedPlayers, 'someOtherID', { name: 'Flint', stats: { goals: 10, assists: 10 }});