I'm trying to display my multiple input errors.
I have a multiple inputs form for several episodes. Each one have a title and a description.
I can display the other errors + the array error (1 ep min and 15 ep max)
But I can't loop inside my episodes array.
VueJS (through Vue Tools) show me the right errors such as : errors.episodes.0.description: 0: The episodes.0.description field is required.
But when I want to loop through errors.episodes[index].description VueJS shows me: [Vue warn]: Error in render: "TypeError: can't access property 0, _vm.$page.errors.episodes is undefined"
I tried this
<div class="text-red-600" v-if="$page.errors.episodes[index].description">
{{ $page.errors.episodes[index].description[0] }}
</div>
Thanks for helping me guys
Problem solved, the "episodes.0.title" was the full index I had to do this :
<div class="text-red-600" v-if="$page.errors['episodes.0.title']">{{ $page.errors['episodes.0.title'][0] }}</div>
to access $page in vue to do with this
<div class="text-red-600" v-if="this.$page.errors.episodes[index].description">
{{ this.$page.errors.episodes[index].description[0] }}
</div>
Related
Ive got a page of different charts and wish to drag to reorder them. The details of each chart is stored as an object inside an array. Each chart is a vue child component. These are loaded dynamically in the parent as can be seen below:
<draggable v-model="sections" #change="reorder">
<template v-if="sections.length > 0" v-for="(section, idx) in sections">
<div class="section" :class="[section.class]" v-if="section.active == 't'">
<component :is="section.section"></component>
</div>
</template>
</draggable>
When I drag them to move them I get the following error:
View Error nextTick: TypeError: Cannot read properties of undefined (reading '__ob__')
I think it may have something to do with the page rerendering before the new chart order is stored in the array. Unsure how to resolve this though.
Any assistance appreciated.
I've tried to compute the array order before it render but this has still produced the same result.
I'm not a total n00b, but I am woefully ignorant of modern Javascript. Most of my scant Vue.js experience has been trying to figure this issue out. I open with this, dear internet, to impress upon you that I'd like it if you'd dumb down your answer as dumb you can.
I'm using Laravel 6/Vue 2 to build a kanban board. My HTML for a single list is as follows:
<section id="lists">
<div class="list full-height" v-for="list in this.results.tlists">
<div contenteditable="true" #blur="saveTitle('list', $event)" #keydown.enter="saveTitle('list', $event);" class="name">#{{ list.name }}</div>
<div class="task" v-for="task in list.tasks">
<p contenteditable="true" #blur="saveTitle('task', $event)" #keydown.enter="saveTitle('task', $event)" >#{{ task.name }}</p>
<div contenteditable="true" v-bind:style="'background-color: #' + tag.hex_color" v-bind:title=tag.name class="tag" v-for="tag in task.tags">
#{{ tag.name }}
</div>
</div>
</div>
</div>
To use Draggable, I start with the documentation on GitHub:
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs#1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.buttflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
As an aside, Butt to Butt did its thing on the URL for Vue.Draggable. I was initially trying to import from cdnjs.buttflare.com.
Per the instructions, I convert the .list div to a draggable element. This is what the console tells me:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
There's an issue in GitHub that recommends replacing the draggable tag like so:
<tbody is="draggable" :list="category.Items" v-bind:element="'tbody'" v-on:move="RowMoved">
I turned the draggable element back to a div and replaced the .list line with:
<div is="draggable" :list="this.results.tlists" v-bind:element="'div'" class="list full-height" v-for="list in this.results.tlists" v-on:Move="mvList">
I'm not familiar with ":list" so I took a guess. The console indicates my guess was not a good one:
[Vue warn]: Error in render: "TypeError: this.results is undefined"
(found in ) vue.esm.browser.js:627:15
[Vue warn]: Error in render: "TypeError: this.results is undefined"
(found in ) vue.esm.browser.js:627:15
TypeError: "this.results is undefined" TypeError: "this.results is undefined"
I suspect the reason it's not defined is because the ajax call hasn't run to give it a value. I tried omitting it entirely but got the earlier error message about unknown custom element.
I'm not sure where to go from here. All my attempts at Googling have been so far afield of my situation that they're not helpful. Any insight would be much appreciated.
Edit: The definition of the ajax call:
mounted() {
var token = 'whatever token';
axios.post("[my dev box]/show-board?id=1", {}, {
headers: { 'Authorization': "Bearer " + token }
})
.then(response => {
this.results = response.data.data
});
}
I'm trying to display an array of images via their source link using an ngFor but I am receiving errors and it's not working!
The image HTML code which is within my card component:
<div class="Session-Participants">
<div *ngFor="let image of {{ participantImages }}" >
<img src='{{image}}'/>
</div>
</div>
In the JS file:
#Input() participantImages? = [];
The data is coming from my other component and the html and JS are as below:
<div *ngFor="let sessions of getSortedSessionList()">
<div *ngFor="let session of sessions">
<tl-session-card
[title]="session.name"
[path]="sessionPath(session.id, session.name)"
[participantImages]="getParticipantDetails(session)" // HERE
>
</tl-session-card>
</div>
</div>
the JS:
participantImage = [];
getParticipantDetails(session) {
this.participantImage = session.roles[0].account.thumbnailURL;
return this.participantImage;
}
I'm expecting for the 'this.participantImage' to be returned and then sent to the card component and then broken down to be displayed separately.
I'm sure I am missing something?
Thanks if you can help at all?
Actually in the stackblitz link, you have a proper array and that not reflect perfectly the code you just provide above.
You need to ensure participantImage stay an array otherwise, the ngFor will not work as expected and you will see some errors in your console.
as #prashant-pimpale says, you need to append to the list of participantImage the result.
In the ts file It would be better to use
participantImage = [];
getParticipantDetails(session) {
// ensures this.participanImage keeps its array type and will process all
// other roles
this.participantImage = session.roles.map(account => account.thumbnailURL);
return this.participantImage;
}
Hope it helps
PS: would be better to set the attribute name of participantImage to participantImages since it represent a list of images ;)
I am new to pagination and I found this directive which is highly sought after for Angular JS from what I have read. I am trying to implement the pagination to work with a my custom pagination html/css layout I have created.
The pagination slightly works as the number of pages show up correctly and the number of items being shown is correct as I specified. The problem however is clicking for example page 2 in the pagination list does not load the next list of 5 items. It simply stays on the same list.
I am a bit confused how to use all the parts properly of this directive so I believe I am doing something wrong with implementing this directive.
The guides I am following is found here which is the same as the repository above.
Downloaded files and added to project:
dirPagination.js
My HTML is as follows:
<div id="pages" ng-if="1 < pages.length || !autoHide">
<span ng-class="{ active : pagination.current == pageNumber,
disabled : pageNumber == '...' }" class="pagenumber"
dir-paginate="pageID in controller.list| filter:q | itemsPerPage:
controller.pageCount" current-page="controller.currentPage">
{{ pageID.id }}
</span>
</div>
<div class="myResults" dir-paginate="results
in controller.list| filter:q | itemsPerPage: 5" current-page="1">
<div class="listFigures">
<figure class="imageList">
<img ng-src="{{results.image}}" ng-alt=
{{results.imageAlt}}" ng-title=
{{results.imageTitle}}" />
</figure>
</div>
</div>
In my controller I have pageCount set based on how many items (it is used as a parameter and works for showing how many pages for now):
vm.pageCount=2;
vm.currentPage = 1;
Working:
The list of pages is showing, following the code above you will see that it is at 8 pages.
Only 5 items are displaying as indicated
Not working:
Clicking on another page (in this case 2) does not bring me to another page of data. The list does not get refreshed. Clicking on another page number keeps the same list of 5 items displaying. There are a total of 8 items, with 5 being displayed clicking on the 2nd page number should show the last 3.
Posts researched:
dirPagination does not work (Angular JS pagination)
Pagination with AngularJS?
dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?
I am confused about how to get this working as well if my implementation is completely off. I have read a few posts as well as try do follow the guide in the repository however I am not understanding how to use it correctly. I am interested in finding out how to implement this pagination directive with custom html/css and not using the dirPagination.tpl.html template.
Following best practices you can read here for standard Angular.
You hardcoded your current page in the directive at the end:
<div class="myResults" dir-paginate="results in controller.list| filter:q | itemsPerPage: 5" current-page="1">
To get it working you need to set it to the variable that holds your current page. You can compare your code to the plunker provided by Pagination Directive http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview at line 42.
After picking apart the code on Plunker found here as well as the template that comes with the download of the directive dirPagination.tpl.html I found out how to successfully utilize is without using the template. You cannot skip anything. Must use lists must use most of the tags provided by the template that are being used with dirPagination.js.
Here is the working solution. Only thing that required changing was in the html:
<div class="results">
<dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)">
</dir-pagination-controls>
<div class="pages" ng-if="1 < pages.length || !autoHide"
class="pagenumber pagination" dir-paginate="pageID in
controller.list| filter:q | itemsPerPage:5"
ng-class="{ active : pagination.current == pageNumber, disabled :
pageNumber == '...' }">
<ul class="pagination" ng-if="1 < pages.length || !autoHide">
<li ng-repeat="pageNumber in pages track by tracker(pageNumber,
$index)" ng-class="{ active : pagination.current ==
pageNumber, disabled : pageNumber == '...' }">
<a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}
</a>
</li>
</ul>
</div>
</div>
Feel free to copy past all that html in your document and use classes I made:
results
pages
pagination
To change the CSS however you like.
Note: Pagination class cannot be removed, even if you take it out of your html if you check you elements when you run the page on the browser you will see that it is placed back in automatically.
Temporary Note: When I figure out how to show the Number of pages in an above tag such as h1 I will add that to my answer.
I have been following a pluralsight course called Creating Apps with Angular, Node and Token Authentication, and am writing my own custom alert messaging.
Basically, what I want to do, is to add different CSS classes depending on the state of the alert message.
When I load my app, I get the following error in the console:
Error: [$parse:syntax] Syntax Error: Token '}' is unexpected, expecting [:] at column 83 of the expression [{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}] starting at [}]
I don't understand, since I'm pretty sure my syntax is correct. Can anybody point out what I'm doing wrong?
My html:
<div class="container" ng-cloak>
<div ui-view></div>
<div class="alert alert-{{alert.type}} animated main-alert" ng-class="{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}"><strong>{{ alert.title }}</strong>
{{ alert.message }}
</div>
</div>
If you need more details, please ask, or check the Github repo. The relevant files are index.html in the root folder, register.js under app/scripts/controllers and alert.js under app/scripts/services.
Thanks for the help.
Change this:
'alert-hidden:!alert.hasBeenShown'
to this:
'alert-hidden':!alert.hasBeenShown
You missed a closing single-quote in property name.