Page breaks after reload VueJS + Nuxt.js - javascript

I have strange problem. I'm creating my application where I have a couple of pages. Normally it looks ok:
But this is what happens when I reload the page:
As you can see, I pressed Ctrl + A just to show you that there is a text. Second reload doesn't help. My application is made on VueJS + NuxtJS. Did anyone meet that?
Here is HTML, if it can be useful:
<template>
<div>
<SideBar :subpages='subpages' #clicked="filterByDate" />
<div class='blog-header'>
<div class='search-div'>
<input class='search-field' placeholder='Search...'>
</div>
</div>
<div class='post-content'>
<div v-if='$route.params.id'>
<h1 class='big-text post-title'>{{ post.title }}</h1>
<h1 class='big-text post-title'>{{ post }}</h1>
</div>
<div v-else>
<div v-for='title in categoriesAndPretitles' :key='title.section'>
<div v-if='$route.params.category === title.section'>
<h1 class='big-text post-title'>{{title.title}}</h1>
<p class='description-text'>{{title.text}}</p>
</div>
</div>
<div v-for='p of posts' :key='p.id'>
<div class='post-preview' #click='toPost(p.id, p.type)'>
<div class='post-preview-img'></div>
<div class='post-preview-content'>
<p>{{ p.title }}</p>
<p class='plot'>{{ p.plot }}</p>
<p class='date'>{{ p.created_at }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- <Footer />-->
</div>
</template>

Actually, answer is kinda silly, because it was about styles. I mean, styles wasn't import correctly. For main page I have this style:
body {
margin: 0;
background-color: #181919;
}
And for some reason this style also worked, for which I didn't import file with this style. And after reload it crused, but now, just by importing it work fine :p

Related

How can i render ngx-quill editor content from my database to a view component?

I'm working on an angular blog app that uses ngx-quill as a text editor. I had no trouble adding records to my database. the problem occurs when I try to render content, it's not showing the data.
this is my details-post component HTML where I want to show content:
<article class="post" *ngIf="post$ | async as post; else loading">
<div class="post-thumbnail" style="background-image: url("https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");" >
<h1 class="post-title">{{ post.titlePost }}</h1>
<div class="post-meta">February 20, 2020</div>
</div>
<div class="blog-post-content">
{{ post.contentPost }}
</div>
</article>
<ng-template #loading>
<div class="container-spinner">
<mat-spinner></mat-spinner>
</div>
</ng-template>
For ngx-quill you have to either use their own directive:
<quill-view [content]="content" format="text" theme="snow"></quill-view>
or innerHTML. More info here
<div class="ql-container ql-snow" style="border-width: 0;">
<div class="ql-editor" [innerHTML]="byPassedHTMLString">
</div>
</div>
I would suggest using their own directive.
Cheers

click event is not working. For few elements it is for few its not

In my code for cmd and normal its working, but for #aboutme its not. Don't know why such event is getting ignored while its working for the above snippet.
var normal = $(".normal");
var cmd = $(".cmd");
normal.on("click", function(){
$(".UI").show();
$(".console").hide();
});
cmd.on("click", function(){
$(".console").show();
$(".UI").hide();
});
$("#aboutme").on("click",function(){
console.log("okay");
});
My Html Code: class dashboard acts as a wrapper.
<div class="dashboard ">
<div class="option">
<div class="normal">Normal</div>
<div class="cmd">Terminal</div>
</div>
<hr style="background-color: white;">
<div class="console">
</div>
<div class="UI ">
<div class="showcase">
<div id="aboutme">
<h2><span>»About</span></h2>
<p>Self-motivated fresher seeking a career in recognized organization to prove my skills and utilize my knowledge and intelligence in the growth of organization.</p>
</div>
<div id="Skills">
<h2><span>Skills</span></h2>
<p> <kbd>Programming Languages</kbd> : Python, Node.js, C++</p>
<p> <kbd>Platform & Development Tools</kbd> : VS Code , Spyder and Jupiter Notebook</p>
</div>
</div>
</div>
Seems to work, can you provide your full HTML
$("#aboutme").on("click",function(){
console.log("okay");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="aboutme">Test</button>

Injecting html - using slot or v-html?

So here’s my case:
I’m creating a modal via:
<Modal id="modal">
<my-component></my-component>
</Modal>
Now I want the content inside the modal to be dynamic, so I can put <input> or <table> or w/e. I’ve tried using slots (it works), but it isn’t really dynamic. I’m wondering if I missed something that would allow the slot to be a bit more dynamic.
Here’s how my modal is set up:
<div
:id="id"
class="main"
ref="main"
#click="close_modal"
>
<div ref="content" class="content" :style="{minHeight: height, minWidth: width}">
<div ref="title" class="title" v-if="title">
{{ title }}
<hr/>
</div>
<div ref="body" class="body">
<slot></slot>
</div>
</div>
</div>
I think using slots is a good choice for this. With the introduction of slot-scope in 2.5, you basically get a reverse property capability where you can set defaults within the child component and access them within the parent. They are of course completely optional to use and you're free to place whatever content you like in the slots.
Here's an example component that would allow you to customize the header, body and footers as you see fit:
// MyModal.vue
<template>
<my-modal>
<slot name="header" :text="headerText"></slot>
<slot name="body" :text="bodyText"></slot>
<slot name="footer" :text="footerText"></slot>
</my-modal>
</template>
<script>
export default {
data() {
return {
headerText: "This is the header",
bodyText: "This is the body.",
footerText: "This is the Footer."
}
}
}
</script>
// SomeComponent.vue
<template>
<div>
<my-modal>
<h1 slot="header" slot-scope="headerSlotScope">
<p>{{ headerSlotScope.text }}</p>
</h1>
<div slot="body" slot-scope="bodySlotScope">
<p>{{ bodySlotScope.text }}</p>
<!-- Add a form -->
<form>
...
</form>
<!-- or a table -->
<table>
...
</table>
<!-- or an image -->
<img src="..." />
</div>
<div slot="footer" slot-scope="footerSlotScope">
<p>{{ footerSlotScope.text }}</p>
<button>Cancel</button>
<button>OK</button>
</div>
</my-modal>
</div>
</template>
<script>
import MyModal from './MyModal.vue';
export default {
components: {
MyModal
}
}
</script>

Dynamic change of content better ways. AngularJS 1.6

I have REST service that gives some information for banner. I want to use this information for dynamic change of slider on main page.
So I simply use $http.get to get data, and then interpolation, with some additional ng-if's to check, if there is specific data, to displaying or not some elements.
<div class="main-block" ng-if="locale==='ru'">
<div ng-repeat="slider in restData.result" ng-class="{'active':$first}" class="slide {{ slider.location }}" ng-style="{'background-image':'url({{ slider.url.url }})'}">
<div class="content-block">
<div class="container">
<div class="right-block">
<h2>{{ slider.text1 }}</h2>
</div>
<div class="clearfix"></div>
<div ng-if="slider.text2 || slider.text3 || slider.text4 || slider.text5" class="offer-block" ng-style="{'background':'rgba({{ slider.color }},0.6)'}">
<div class="offer-block__country">{{ slider.text2 }}</div>
<div class="offer-block__name">
{{ slider.text3 }}
</div>
<div class="offer-block__days">
{{ slider.text4 }}
</div>
<div class="offer-block__date">
{{ slider.text5 }}
</div>
</div>
<div class="clearfix"></div>
<a ng-if="slider.link" ui-sref="shell.tourShow({url:'{{ slider.link }}'})" class="orange-btn">
Подробнее
</a>
</div>
</div>
</div>
</div>
But I feel like there must be better way to work with such type of data manipulation, more readable and understandable. Can you please help to find one, or give a little example, how to do it better.
It is relatively good already, the only thing I would change is not to directly map to ng-repeat="slider in restData.result"
but rather create a $scope variable like
$scope.sliders = {};
// in rest request update the local variable with most recent data
// and then use ng-repeat="slider in sliders"

jade extend and include overwrites files for no reason

SlideBase.jade
.slideWrap
.slideInner
block slides
slideSet1.jade
extends SlideBase
append slides
.slide set1slide1
.slide set1slide2
.slide set1slide3
slideSet2.jade
extends SlideBase
append slides
.slide set2slide1
.slide set2slide2
.slide set2slide3
output.jade
#mySlides
p some copy
#slideZone
include slideSet1.jade
include slideSet2.jade
expected result:
<div id="mySlides>
<p>some copy</p>
<div id="slideZone>
<div class="slideWrap>
<div class="slideInner>
<div class="slide">set1slide1</div>
<div class="slide">set1slide2</div>
<div class="slide">set1slide3</div>
</div>
</div>
<div class="slideWrap>
<div class="slideInner>
<div class="slide">set2slide1</div>
<div class="slide">set2slide2</div>
<div class="slide">set2slide3</div>
</div>
</div>
</div>
</div>
actual result:
<div id="mySlides>
<p>some copy</p>
<div id="slideZone>
<div class="slideWrap>
<div class="slideInner>
<div class="slide">set1slide1</div>
<div class="slide">set1slide2</div>
<div class="slide">set1slide3</div>
</div>
</div>
<div class="slideWrap>
<div class="slideInner>
<div class="slide">set1slide1</div>
<div class="slide">set1slide2</div>
<div class="slide">set1slide3</div>
</div>
</div>
</div>
</div>
Rather than getting slideSet2.jade, jade compiler just repeats slideSet1.jade in its place. What am I doing wrong here?
DISCLOSURE:
I am running on Codekit with Jade version 0.27.2; and any accepted answer much address why its not working in my environment.
This issue was fixed in a newer version of jade. And CodeKit's version should be brought up to date.

Categories