I am new with Vue and trying to open sketchpad inside vue-js-modal.
I am not sure what am I doing wrong here.
I am using VueModal and vue-signature-pad.
It works fine on the page but I could not make it run in the modal.
Here is the link to codesandbox
App.vue code is as follow
<template>
<div id="app">
<v-dialog />
<div class="container">
<div class="row">
<div class="col-12 mt-2">
<div class="col-6 mt-2">
<button class="btn btn-secondary" #click="showButtonsDialog">
Open Dialog
</button>
</div>
</div>
<div class="col-12 mt-2">
<VueSignaturePad
id="signature"
width="100%"
height="100%"
ref="signaturePad"
/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
showButtonsDialog() {
this.$modal.show("dialog", {
title: "Some Title",
text:'<VueSignaturePad id="signature" width="100%" height="200px" ref="signaturePad"/>',
buttons: [
{
title: "CANCEL",
handler: () => {
this.$modal.hide("dialog");
}
}]
});
}
}
};
</script>
What am I doing wrong here?
Thank you
I think text only work with plain text, not Vue component. To include Vue component in your modal, you can declare it in template
<modal name="example"
width="80%"
height="80%">
<VueSignaturePad
id="signature"
width="100%"
height="100%"
ref="signaturePad"
/>
</modal>
and when you want to show it
showButtonsDialog() {
this.$modal.show("example")
}
Demo on Codesandbox
Related
I am making a weather application that tells what is the current temperature depending on what city you inputed, and I want to use the API Icons but I cant seem to make them work as only a default image icon pops up in place of the weather icon.
Everything Else seems to be working fine for the most part.
App.js
import axios from "axios";
import { useState } from "react";
function App() {
const [data,setData]=useState({})
const [location,setLocation]=useState('')
const url= `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=1f35643112b0237f679250d783dd2abf&units=imperial`
const value = data.weather
const imgurl = `http://openweathermap.org/img/${value?value[0].icon:null}.png`
const searchLocation=(event)=>{
if(event.key==='Enter'){
axios.get(url).then((response)=>{
setData(response.data)
console.log(response.data)
})
setLocation('')
}
}
return (
<div className="App">
<div className="search">
<input
value={location}
onChange={event=>setLocation(event.target.value)}
onKeyPress={searchLocation}
placeholder='Enter Location'
type='text'
/>
</div>
<div className="container">
<div className="top">
<div className="Location">
<p>{data.name}</p>
</div>
<div className="temp">
{data.main?<h1>{data.main.temp.toFixed()}°F</h1>:null}
</div>
<div className="description">
{data.weather ?<p>{data.weather[0].main}</p>:null}
</div>
<div className="Icon">
<img src='imgurl' width="120" height="100"></img>
</div>
</div>
{data.name!=undefined&&
<div className="bottom">
<div className="feels">
{data.main ?<p>{data.main.feels_like.toFixed()}°F</p>:null}
<p>Feels Like</p>
</div>
<div className="humidity">
{data.main ?<p>{data.main.humidity.toFixed()}%</p>:null}
<p>humidity</p>
</div>
<div className="wind">
{data.wind ?<p>{data.wind.speed.toFixed()} MPH</p>:null}
<p>Wind Speed</p>
</div>
</div>
}
</div>
</div>
);
}
export default App;
Im fairly new to React.js and am still getting used to everything any form of help would be much apprecciated!
You need to change
<img src='imgurl' width="120" height="100"></img>
to
<img src={imgurl} width="120" height="100"></img>
As imgurl is a JS variable, the curly braces are needed.
I am re-building my Portfolio Site into an SPA and wanted to add the modals into one of my pages. The JS for them is saved into a "main.js" file and the tag is put in my HTML file. The problem is that it doesn't work and I am not sure why. Let me know if you need more info I am new to this.
Here is the component:
import React, { Component } from 'react';
import toDoListApp from '../mockups/to-do-list-img..jpg';
import pokeMockup from '../mockups/mockup-poke.jpg';
import ExpatColMock from '../img/colombia_logo.png';
import DogAPIMock from '../mockups/mockup-doggie.gif';
import ScriptTag from 'react-script-tag';
let aScript = props => (
<ScriptTag type="text/javascript" src="../js/main.js" />
)
class Work extends Component {
render() {
return (
<section>
<div>
{/* Modal Background and Modal */}
<div className="mCustomScrollbar" data-mcs-theme="dark" id="modal-background">
<div id="modal">
<span id="close-btn">×</span>
<img className="modal-img" src="mockups/mockup.png" alt="expatcolombia" />
<h2 className="modal-title">Expat Colombia</h2>
<div className="modal-text">
<h3>Description</h3>
<p>Expat Service for people moving to Colombia. They provide consultations, tours, and assist in housing.</p>
<h3>Dependencies</h3>
<p>HTML, CSS, Javascript</p>
</div>
<div className="buttons">
Visit
Github
</div>
</div>
</div>
{/* Modal Background and Modal */}
<div className="mCustomScrollbar2" data-mcs-theme="dark" id="modal-background2">
<div id="modal2">
<span id="close-btn2">×</span>
<img className="modal-img2" src="mockups/poke-mockup.jpg" alt="expatcolombia" />
<h2 className="modal-title">PokemonAPI</h2>
<div className="modal-text2">
<h3>Description</h3>
<p>Pokemon-themed App with a that includes names, images, and stats of different Pokemons.</p>
<h3>Dependencies</h3>
<p>Javascript, JQuery, Ajax</p>
</div>
<div className="buttons2">
Demo
Github
</div>
</div>
</div>
</div>
<div>
<header className="ScriptHeader">
<div>
<h1>My Work</h1>
</div>
</header>
<section id="work">
{/*****Image size (height) is paramount to keep the photos formatted properly*****/}
{/* Image row 1 */}
<div className="row">
<div className="column">
<div className="container">
<img src={toDoListApp} className="image" alt="to-do-list-api" />
<a href="https://github.com/Drxl95/To-Do-List" target="_blank">
<div className="overlay">
<div className="text">Simple jQuery To Do List App</div>
</div>
</a>
</div>
</div>
<div className="column">
<a id="open-btn2">
<div className="container">
<img src={pokeMockup} className="image" alt="PokemanAPI" />
<div className="overlay">
<div className="text">Pokemon-themed API app <br /></div>
</div>
</div>
</a>
</div>
<div className="column">
<a id="open-btn">
<div className="container">
<img src={ExpatColMock} className="image" alt="expatcolombia.com" />
<div className="overlay">
<div className="text">Expat Colombia</div>
</div>
</div>
</a>
</div>
<div className="column">
<a href="https://github.com/Drxl95/DogAlbum" target="_blank">
<div className="container">
<img src={DogAPIMock} className="image" alt="dogAPI-mockup" />
<div className="overlay">
<div className="text">Dog Album API</div>
</div>
</div>
</a>
</div>
</div>
{/* Image row 2 */}
{/* <div class="row">
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-4.jpg" class="image">
<div class="overlay">
<div class="text">Example 4</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-5.jpg" class="image">
<div class="overlay">
<div class="text">Example 5</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-6.jpg" class="image">
<div class="overlay">
<div class="text">Example 6</div>
</div>
</div>
</a>
</div>
</div> */}
{/* partial */}
</section>
</div>
</section>
)
}
}
export default Work
External JS file
// select the open-btn button
let openBtn = document.getElementById('open-btn');
// select the modal-background
let modalBackground = document.getElementById('modal-background');
// select the close-btn
let closeBtn = document.getElementById('close-btn');
// shows the modal when the user clicks open-btn
openBtn.addEventListener('click', function () {
modalBackground.style.display = 'block';
});
// hides the modal when the user clicks close-btn
closeBtn.addEventListener('click', function () {
modalBackground.style.display = 'none';
});
// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
// check if the event happened on the modal-background
if (event.target === modalBackground) {
// hides the modal
modalBackground.style.display = 'none';
}
});
// select the open-btn button
let openBtn2 = document.getElementById('open-btn2');
// select the modal-background
let modalBackground2 = document.getElementById('modal-background2');
// select the close-btn
let closeBtn2 = document.getElementById('close-btn2');
// shows the modal when the user clicks open-btn
openBtn2.addEventListener('click', function () {
modalBackground2.style.display = 'block';
});
// hides the modal when the user clicks close-btn
closeBtn2.addEventListener('click', function () {
modalBackground2.style.display = 'none';
});
// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
// check if the event happened on the modal-background
if (event.target === modalBackground2) {
// hides the modal
modalBackground2.style.display = 'none';
}
});
// function addMusic() {
// let navBarLists = document.getElementById('#navBarLists');
// let musicListItem = document.createElement('li');
// }
You have to use import module and extract your desired functions and variables:
import React, { Component } from 'react';
import toDoListApp from '../mockups/to-do-list-img..jpg';
import pokeMockup from '../mockups/mockup-poke.jpg';
import ExpatColMock from '../img/colombia_logo.png';
import DogAPIMock from '../mockups/mockup-doggie.gif';
import ScriptTag from 'react-script-tag';
// import your js file
import defaultFunction, {secondaryFunction} from '../js/main';
I'm new to VueJS, and I'm coming to you to find out if what I've done is feasible or not.
Instead of having old data, while loading components, I prefer to display a preloader.
I liked the idea of a skeletons loader, rather than a simple spinner.
Right now I have a state in the store, which is null by default, I have a mutation to set the loading, and a getter.
To avoid visual bugs, from the router, with a beforeEach, I initialize the loading state to true, so that by default the components start loading !
Then, in my view, I import the Loader component, with its svg and style.
And I place it over the component that needs to be displayed, with a simple condition v-if="!getLoading" and v-if="getLoading".
The problem is that I feel like I'm tinkering with the blind, the beforeach and displaying this component with a condition?
I would be reassured if someone can give me some advice, or approve this method of doing!
Here is the code of a simple Loader component
<template>
<content-loader
:height="78"
:width="390"
:speed="4"
primaryColor="#f2f6fe"
secondaryColor="#e0eafa"
>
<rect x="9" y="20" rx="4" ry="4" width="142" height="13" />
<rect x="316.38" y="5.38" rx="5" ry="5" width="68" height="68" />
<rect x="9" y="46" rx="4" ry="4" width="75.26" height="13.26" />
</content-loader>
</template>
<script>
import { ContentLoader } from "vue-content-loader"
export default {
components: {
ContentLoader
}
}
</script>
The store code
const state = {
loading: null,
}
const mutations = {
SET_LOADING: (state, payload) => {
state.loading = payload;
},
}
const getters = {
getLoading(state) {
return state.loading;
}
}
Example of utilisation in my view : with condition
<div class="col-12 col-lg-4 col-xl-3 col-md-6" v-if="getLoading"> // the condition
<div class="card animate-up-2">
<div class="card-body">
// the component
<StatsLoader></StatsLoader>
</div>
</div>
</div>
<div class="col-12 col-lg-4 col-xl-3 col-md-6" v-if="!getLoading"> // the condition
<div class="card animate-up-2">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div>
<h3 class="font-weight-bold text-uppercase">5 %</h3>
<div class="d-flex d-sm-block d-lg-flex align-items-end">
<p class="mb-0 mr-2 text-muted">API usage</p>
</div>
</div>
<div>
<div class="avatar avatar-lg">
<div class="avatar-title sred sbg-soft-red rounded">
<i class="fad fa-project-diagram"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If that is a global loader being used on all the routes, you can wrap it in a component and use that component everywhere. Use named slots to manage your template.
An example of a Loader component:
Loader.vue
<template>
<div>
<slot name='loading' v-if='getLoading'>
<StatsLoader></StatsLoader>
</slot>
<slot name='content v-if='!getLoading'></slot>
</div>
</template>
<script>
import StatsLoader from '#/components/StatsLoader.vue';
export default {
name: 'Loader',
props: {
isLoading: {
type: Boolean,
default: null
}
},
computed: {
getLoading() {
return this.isLoading === null ? this.$store.state.loading : this.isLoading;
}
},
components: {
StatsLoader
}
}
</script>
Also, it would useful to register this component globally so you don't need to include it all the routes. You can do that using Vue.component in your main entry file.
import Loader from '#/components/Loader.vue';
Vue.component('Loader', Loader);
And you can rewrite your current component template like this:
<Loader>
<template v-slot:loader>
<!-- Use a different loader here for this page maybe -->
</template>
<template v-slot:content>
<div class="card animate-up-2">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div>
<h3 class="font-weight-bold text-uppercase">5 %</h3>
<div class="d-flex d-sm-block d-lg-flex align-items-end">
<p class="mb-0 mr-2 text-muted">API usage</p>
</div>
</div>
<div>
<div class="avatar avatar-lg">
<div class="avatar-title sred sbg-soft-red rounded">
<i class="fad fa-project-diagram"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</Loader>
Also you can use <Loader :is-loading='isPageLoading' /> in case you don't want to rely on the global loader.
I try to open a popover when I click on the "Delete" button.
The problem is that all the popovers of all the "Delete" buttons open at the same time.
Can you help me solve this problem?
I would like the click, only the popover concerned opens. And with the button "cancel", only the button concerned closes.
Thank you !
<template>
<div>
<div v-for="student in students.data">
<div class="col--10">
<avatar v-bind:username="student.name" :size="36" class="col--10"></avatar>
</div>
<div class="t20 col--30">{{ student.name }}</div>
<div class="t20 col--40">{{ student.email }}</div>
<div style="text-align: right" class="col--20">
<el-button icon="el-icon-edit" size="small" #click="editStudent(student)"></el-button>
<el-popover placement="top" width="160"
v-model="deleteStudentPopover">
<p>Are you sure to delete this?</p>
<div>
<el-button size="mini" type="text" #click="deleteStudentPopover = false">cancel</el-button>
<el-button type="primary" size="mini" #click="myDeleteFunction">Yes, delete!</el-button>
</div>
<el-button slot="reference" #click="deleteStudentPopover = true">Delete</el-button>
</el-popover>
</div>
</div>
</div>
</template>
export default {
data() {
return {
deleteStudentPopover: false,
students: []
}
},
}
Use <div v-for="(student, index) in students.data"> then bind/pass index when calling different functions.
import React from 'react';
import './styles/index.css';
import ReactDOM from 'react-dom';
import AboutUs from './about.js';
import ContactForm from './contact.js';
import MainBody from './mainbody.js';
import Footer from './footer.js';
class Header extends React.Component
{
constructor(props)
{
super(props);
this.opengdMenu=this.opengdMenu.bind(this);
this.openDesktopAboutusForm=this.openDesktopAboutusForm.bind(this);
this.openDesktopContactForm=this.openDesktopContactForm.bind(this);
this.loadHomePage=this.loadHomePage.bind(this);
this.state={
isMenuOpen:false //state variable to change the state of menu from open to close and vice-versa.
};
}
opengdMenu()
{
this.setState({isMenuOpen:!this.state.isMenuOpen});
if(this.state.isMenuOpen===true)
{
var about_us = document.getElementById('about');
about_us.setAttribute("style","display:none");
}
}
openDesktopAboutusForm()
{
ReactDOM.render(<AboutUs />,document.getElementById('about'));
}
openDesktopContactForm()
{
ReactDOM.render(<ContactForm />,document.getElementById('about'));
}
loadHomePage()
{
this.render()
ReactDOM.render(<MainBody />, document.getElementById('mainbody'));
ReactDOM.render(<Footer />,document.getElementById('footer'));
}
render()
{
if(!this.state.isMenuOpen) //this part will render the header with the menu closed.
{
return(
<div>
<div className="row">
<div className="gd_header_section body_fixed_content hidden-xs hidden-sm">
<div className="gd_header_default_container" id="gd_header_default_container">
<img className="gd_header_logo_icon" onClick={this.loadHomePage} src={require('./images/GD_Logo_white.png')} alt="gd logo_icon_ desktop" />
<img className="gd_header_menu_icon" onClick={this.opengdMenu} src={require('./images/menu_icon.png')} alt="gd menu icon" />
<div className="gd_header_login">LOGIN</div>
</div>
</div>
</div>
<div className="row">
<div className="gd_small_header_section body_fixed_content visible-xs visible-sm">
<div className="gd_small_header_default_container" id="gd_small_header_default_container">
<img className="gd_small_header_logo_icon1" src={require('./images/GD_Logo_white.png')} alt="GD logo white" onClick={this.loadHomePage} />
<img className="gd_small_header_menu_icon" src={require('./images/menu_icon.png')} alt="small menu icon" onClick={this.opengdMenu} />
</div>
</div>
</div>
</div>
);
}
else //this part will render the header with the menu opened.
{
return(
<div className="row">
<div className=" col-md-12 col-xs-12 col-sm-12 gd_header_section body_fixed_content hidden-xs hidden-sm">
<div className="gd_header_collapsed_container" id="gd_header_collapsed_container">
<img className="gd_header_logo_icon" src={require('./images/GD_Logo_gray.png')} alt="gd gray logo" onClick={this.loadHomePage} />
<img className="gd_header_menu_close_icon" src={require('./images/cross_icon.png')} alt="cross icon" onClick={this.opengdMenu} />
<div className="godocto_header_menu_option_div" onClick={this.openDesktopAboutusForm}>
<span><a className="gd_header_menu_option"> ABOUT US </a></span>
</div>
<div className="godocto_header_menu_option_div" onClick={this.openDesktopContactForm}>
<span><a className="gd_header_menu_option">CONTACT US</a></span>
</div>
</div>
</div>
<div className="gd_small_header_collapsed_container col-xs-12 col-sm-12 col-md-12 visible-xs visible-sm" id="gd_small_header_collapsed_container">
<div className="gd_small_header_collpased_menu_division">
<img className="gd_small_header_logo_icon2" src={require('./images/GD_Logo_gray.png')} alt="gd small logo" onClick={this.loadHomePage} />
<img className="gd_small_header_menu_close_icon" src={require('./images/cross_icon.png')} alt="gd small menu mobile" onClick={this.opengdMenu} />
</div>
<div className="gd_small_header_menu_division">
<div className="gd_small_header_menu_option_division" onClick="openSmallDesktopAboutusForm()">
<span><a className="gd_small_header_menu_option">ABOUT US</a></span>
</div>
<div className="gd_small_header_menu_option_division" onClick="openSmallDesktopContactForm()">
<span><a className="gd_small_header_menu_option">CONTACT US</a></span>
</div>
</div>
</div>
</div>
);
}
}
}
export default Header
when i clicked on menu then it caught error or i click whether about or contact same error will come
in about us and contact component i render text simply but error was come in header component
there is only one state variable
The error you are having is on this part:
<div className="gd_small_header_menu_division">
<div className="gd_small_header_menu_option_division" onClick="openSmallDesktopAboutusForm()">
<span><a className="gd_small_header_menu_option">ABOUT US</a></span>
</div>
<div className="gd_small_header_menu_option_division" onClick="openSmallDesktopContactForm()">
<span><a className="gd_small_header_menu_option">CONTACT US</a></span>
</div>
</div>
take a look at this part onClick="openSmallDesktopAboutusForm()". You can write it like this onClick={openSmallDesktopAboutusForm()} just like what you did with your other methods.
As per the warning message, you can just change onclick on small caps, with onClick with the camel case.