I'm learning how to use vue.js
I've a shared hosting plan where I can only use html. I'm fetching the data I need using axios and a remote wordpress installation that will act as a backend only. What I need to know, is how I can change the DOM content of the index.html using vue if the user click on a link and I need to change the layout of the page because a different presentation for the contents is needed?
See the example:
<div id="vue-app">
link to layout 2
<div class="col-12">starting layout </div>
</div>
// after the user click the link (v-on:click) the layout change
<div id="vue-app">
link to layout 1
// layout change
<div class="col-6">new layout </div>
<div class="col-6">new layout </div>
</div>
Please read up on Conditional Rendering in Vue.js.
You can have a boolean variable in the data compartment of your script tag and change it on click.
And in the tags put v-if="your_bool_variable".
<div id="vue-app" v-if="layout_switch">
link to layout 2
<div class="col-12">starting layout </div>
</div>
// after the user click the link (v-on:click) the layout change
<div id="vue-app" v-else>
link to layout 1
// layout change
<div class="col-6">new layout </div>
<div class="col-6">new layout </div>
</div>
Negate the boolean variable at the #click event.
Data could look like the following:
<script>
export default {
name: "YourComponent",
data: () => {
return {
layout_switch: true
}
},
methods: {
changeLayout() {
this.layout_switch = !this.layout_switch;
}
}
}
</script>
Related
I have a feeling the answer to this question is quite simple, but I cannot find an answer to it anywhere. I am build a very simple app with Vue.js (v2.6.11) that consists of just two pages, a home page and another page with a form. Now, on both of these pages, there are several parallax containers made with MaterializeCSS. If you're unfamiliar, a parallax container is basically just a div with an image as its background, and when the user scrolls, the background image moves at a different rate than the foreground of the site.
My problem is that when I navigate from the home page to the page with the form using a Vue.js link, <router-link :to="{name: "FormPage"}>Form Page</router-link>, the images in the parallax containers DO NOT load. However, if I refresh the page, the images load fine and everything is well. Similarly, If I replace the <router-link> with a simple Form Page the images load fine, everything works as it should.
So my question is this: why don't my parallax container images load on the page navigated to with <router-link></router-link>, but then when I navigate to that same page with a the images do load? In other words, what is <router-link></router-link> doing that prevents my parallax container images from loading??
Any and all feedback would be appreciated. Otherwise, I hope you have a marvelous day, and thank you for you time in reading and or answering my question :)
--Update--
CODE:
This is the component on the homepage that contains the link in question:
<template>
<div id="index-banner" class="parallax-container" style="height: 400px;">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 class="header center white-text">{{ translations.title }}</h1>
<div class="row center">
<h5 class="header col s12 white-text light">{{ translations.subtitle }}</h5>
</div>
<div class="row center">
<!-- <router-link :to="{name: 'Generator', force: true }" class="btn-large waves-effect waves-light teal lighten-1 center-align">{{ buttonText }}</router-link> -->
{{ translations.buttonText }}
</div>
</div>
</div>
<div class="parallax"><img :src="img" alt="Unsplashed background img 1"></div>
</div>
</template>
<script>
export default {
name: 'Banner1',
props: {
translations: String,
img: String
},
}
</script>
<style>
</style>
This is the 'view' that is navigated to, containing the parallax containers in question:
<template>
<div>
<PageTitle
:translations="$t('generatorPage.components.pageTitle')"
img="/imgs/parallax5.jpeg"
/>
<SigForm
:translations="$t('generatorPage.components.sigForm')"
/>
<Separator
img="/imgs/parallax5.jpeg"
/>
</div>
</template>
<script>
import PageTitle from '#/components/banner/parallax/PageTitle'
import Separator from '#/components/banner/parallax/Separator'
import SigForm from '#/components/generator/SigForm'
export default {
name: 'Generator',
components: {
PageTitle,
SigForm,
Separator,
}
}
</script>
<style>
</style>
Here is the 'PageTitle' component with a parallax container:
<template>
<div class="parallax-container form-parallax-container">
<h1 class="white-text center">{{ translations.title }}</h1>
<div class="parallax"><img :src="img"></div>
</div>
</template>
<script>
export default {
name: 'PageTitle',
props: {
translations: String,
img: String
}
}
</script>
<style>
</style>
And here is the 'Separator' with a parallax container:
<template>
<div class="parallax-container form-parallax-container">
<div class="parallax"><img :src="img"></div>
</div>
</template>
<script>
export default {
name: 'Separator',
props: {
img: String
}
}
</script>
<style>
</style>
---UPDATE: Complete repo & sandboxed app---
Someone mentioned it would be eaiser if I provided a sandboxed app or whatever to debug it, so I just made the github repo public and also uploaded it to codesandbox.io. You'll notice that on codesandbox.io, the parallax images aren't even loading at all...on the homepage, on the form page, or upon refresh!
Ok so this is not the answer, but I needed to post some code to illustrate.
I have to confess that I'm not fully au-fait with JS frameworks, but I do know materializecss very well. I've been trying to help another user with a React based problem where the sidenav stops working when the react router is used - until he refreshes the page, when it works fine again.
So here's my hunch:
Parallax is a component that needs initialising like so:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.parallax');
var instances = M.Parallax.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.parallax').parallax();
});
If you leave that initialisation code out, it won't work. And, taken from the docs for select fields dynamically added components need reinitialising.
You must initialize the select element as shown below. In addition,
you will need a separate call for any dynamically generated select
elements your page generates.
So my hunch is that when the page is re-rendered via a navigator, we get a new component added to the dom - but this is after the initialisation has already run. So that component is not initialised.
Could be wrong, hope I'm not for your sake more than mine. As I said, I don't know Vue or React very well at all, and my suggestions to run the init at each render didn't work for the React issue - but there are so many moving parts it's hard to rule out.
Does anyone know the right syntax on how to go to a particular section on a page in ionic? I'm still trying to work my way with angular and ionic 4. This is my code and whenever I press the button that should direct me to section 2 of the current page, I end up going to a different page instead.
<div id="section1">
//some content here
<ion-button href="#section2>Next</ion-button>
</div>
<div id="section2">
//some content here
<ion-button href="#section3>Next</ion-button>
</div>
For this you will can use scrollToPoint() method.
Declare a method in your component.ts file to get position of element:
export class SampleComponent {
#ViewChild(Content) content: Content;
scrollTo(_id: string) {
let y = document.getElementById(_id).offsetTop;
this.content.scrollToPoint(0, y);
}
}
Now bind this method to your scrollTo method and send section id where you want to scroll as argument.
<div id="section1">
//some content here
<ion-button (click)="scrollTo('section2')">Next</ion-button>
</div>
<div id="section2">
//some content here
<ion-button (click)="scrollTo('section3')">Next</ion-button>
</div>
I've added breadcrumb in my site such that when clicks on it, it makes that specific variable undefined(which session stored value and can retrieved easily in other component) and based on that, in other component I've ngIf for that variable such that if that variable is undefined then that specific div should not be shown and other div should be shown. You can get more idea by looking into following gifs.
Problem I'm facing is on first click it don't go back to that other div which it does on second click.
Clicking twice on breadcrumb for Model(or its value) do the trick but i want to do this happens on first click.
Breadcrumb component TS file:
#SessionStorage() model: any;
onClickModel(m){
this.model = m.value; // gets the value from button and set as model value
}
other component HTML file:
<div class="model" *ngIf="model && !provider">
<div class="row">
<div class="col-md-12 text-center pb-20">
<h2>Choose your Carrier</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<!-- That next component buttons for providers -->
</div>
</div>
I am creating chatbox, and that chat box is dynamically generated on click of contact.
In dynamically generated HTML I have a textarea to enter some text, here is the HTML
<div class="chatboxinput">
<textarea id="chatboxtextareaankur" class="chatboxtextarea" keydown.delegate="checkChatBoxInputKey($event, 'id', 'name')"></textarea>
</div>
But the method "checkChatBoxInputKey" is not executing on any key down event.
Please let me know how to solve this.
It doesn't work because Aurelia's view compiler doesn't have an opportunity to compile dynamically generated markup to find the bindings, etc.
Use the if binding to add/remove an element from the DOM. Here's an example:
http://plnkr.co/edit/kBUz94?p=preview
<template>
<button click.delegate="showChatBox = true">Show Chat Box</button>
<div if.bind="showChatBox" class="chatboxinput">
<textarea id="chatboxtextareaankur" class="chatboxtextarea" keydown.delegate="checkChatBoxInputKey($event)"></textarea>
</div>
</template>
export class App {
checkChatBoxInputKey(e) {
console.log(e.which);
return true;
}
}
I'm new to React and looking for some best practices. I'm making a Chrome extension that's a small widget. The widget has 3 sections. Call Section A, Section B, and Section C. At the top of the widget I want to have buttons like so:
[logo] | Section A | Section B | Section C |
[
Panel Content (Default Section A)
]
And when one of those section links are clicked, the content in the panel below updates with the relevant content for that section.
My first thought was to render all of them, and then just hide jQuery show/hide() on the panels. It works, but I'd rather not do that because each panel loads some data asynchronously and I'd rather not pay that price up front if the user never clicks on the latter 2 links.
I've created React components for each section so their easy to swap out.
I then tried this:
showSectionB: function(){
React.renderComponent(
<SectionBList person={this.props.person} />,
document.querySelector('.main .panel')
);
},
render: function() {
return (
<div className="main">
<div className="actions">
<button className="T-I-ax7" onClick={this.showSectionB}>Section B</button>
</div>
<div className="panel">
<SectionAList person={this.props.person} />
</div>
</div>
);
}
It felt more logical, but feels weird I'm reaching inside a component for the container to place the component. On top of that, the whole browser locked up and gave me this message after the panel switched:
React attempted to use reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server.
Is there a better way to hand this?
The key to React is to always go through render() to render your application. User interaction should only fire events that trigger a re-render(). In your example onClick should call setState() to do that.
getInitialState: function () {
return {
section: "a"
};
},
showSectionB: function(){
// Update the component's state for a re-render().
this.setState({
section: "b"
});
},
render: function() {
if (this.state.section == "a") {
var section = <SectionAList person={ this.props.person } />;
}
else if (this.state.section == "b") {
var section = <SectionBList person={ this.props.person } />;
}
return (
<div className="main">
<div className="actions">
<button className="T-I-ax7" onClick={ this.showSectionB }>Section B</button>
</div>
<div className="panel">
{ section }
</div>
</div>
);
}
Updated thanks for the comment!