Im trying to use InputMask from PrimeVue in project on Vue3
I have block in template tag:
<div class="sdf">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
and i have script:
export default {
data: () => ({
val1: null,
})
}
Everything seems okay, and console doesn't show any errors, but still, input is not visible, only label is shown. What do i do wrong?
It sounds like you didn't register InputMask.
You could register it globally with app.component('InputMask', InputMask):
// main.js
const { createApp } = require('vue')
import PrimeVue from 'primevue/config'
import InputMask from 'primevue/inputmask'
import App from './App.vue'
createApp(App)
.use(PrimeVue)
.component('InputMask', InputMask)
.mount('#app')
demo
Related
I have a long message saved as html format. I want to show this message to the screen without Html element as textarea input.
message = <p>Mobil ä ........ </p>
Before I upgrade React version to V6 it was working fine as the code below.
I could scroll down and adjust the textarea box size to see the message inside the box.
<div
id="textarea"
name="message"
className="form-control"
dangerouslySetInnerHTML={{__html: this.state.message }}
ref="textarea"
/>
after updating to React V6, when I write exactly the same code, it gives me an error saying
"Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here".
My first approach was to just simply delete ref="textarea" but then the message is overflow from the box and cannot read other information below.
And my second approach is to use useRef() but im not really understanding how to incorporate it to my code.
any suggestion here plz.
First option:
import { useEffect, useRef } from 'react';
function Teste() {
const divElement = useRef<HTMLDivElement>(null);
useEffect(() => {
if (divElement.current) {
divElement.current.appendChild(document.createElement('textarea')).value = 'Hello World';
}
});
return <div ref={divElement} />;
}
export default Teste;
Second option:
https://www.radix-ui.com/docs/primitives/utilities/slot
I'm using Chakra UI in React with Typescript and having such a weird issue I trying to implement Modal with the following code in modal.tsx file.
import {
useDisclosure,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
} from "#chakra-ui/react";
export default function CustomModal() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Create your account</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}></ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
once i click on Open Modal button it simply shows the overlay without actual content of the modal.
I tried to reproduce your problem and found that - For Chakra UI to work correctly, you need to set up the ChakraProvider at the root of your application.
import * as React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "#chakra-ui/react"
function App({ Component }) {
// 2. Use at the root of your app
return (
<ChakraProvider>
<Component />
</ChakraProvider>
)}
Here is the running code sandbox link of your problem.
In App.js I wrapped the application in <ChakraProvider>.
Hope it works for you.
First Check You Wrappped Your App With ChakraProvider If Provided
Now i use visual studio code to do my project. I can build my code without error, but when running, it no show out the content for html file, only have show css like header abd footer. i have click button on header but cannot go to other page.Here is the sample code
code in index.html
<nav>
List
New student
Student feedback
</nav>
Vue router
const router = new VueRouter({
routes: [
{ path: '/home', component: load('home') },
{ path: '/insert', component: load('insert') },
{ path: '/update/:id', component: load('update') },
{ path: '/feedback', component: load('feedback') },
{ path: '*', redirect: '/home' }
]
});
File name and type: _home.html, _insert.html, _update.html, _feedback.html
Can help me see the problem, thank you
I don't think you should edit directly to index.html as Vue is Single Page Application (SPA) framework. Instead, you should use Vue Component for each page.
This video might help you to figure out how to use Vue and Vue Router properly: https://youtu.be/nnVVOe7qdeQ
Edit:
For sake of clarity, Let me build simplified diagram of Vue project for you.
First of all, make sure you create the project via vue cli. It guides you to build your new vue project better.
Let's say we have 3 pages:
Home
About
Another
Each page has its own CSS, HTML (we call it template), and JavaScript in one file, the .vue file. To connect them, we need a first entrance, main.js. Inside of it, we can configure the router.
Inside main.js
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import HomePage from "./HomePage.vue";
import AboutPage from "./AboutPage.vue";
import AnotherPage from "./AnotherPage.vue";
// This is your router configuration
Vue.use(VueRouter);
const router = new VueRouter({
[
{ path: "/", component: HomePage },
{ path: "/about", component: AboutPage },
{ path: "/another", component: AnotherPage },
],
mode: "history",
});
// Initialize Vue App
new Vue({
router,
render: h => h(App),
}).$mount("#app");
Then, we need to create App.vue and put <router-view /> inside of it.
Inside App.vue source file
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
// Keep this empty. Except if you
// need to add sidebar or any else.
}
</script>
Now you're ready to create those three pages
Every pages looks like this:
<style scoped>
// Your CSS here
</style>
<template>
<div>
<!-- Your HTML here -->
</div>
</template>
<script>
export default {
data() {
return {
// Your reactive data here
}
},
mounted() {
// Your script here
},
methods: {
// Your functions here
},
}
</script>
That's all I can explain, hope it helps. If I missed something, please don't hesitate to tell me. Thank you!
I'm trying to use Vuelidate with Vue 3. When I try and add some validators to a component I get the following error:
index.js?1dce:614 Uncaught (in promise) TypeError: Cannot read property 'super' of undefined
I believe this is to do with the way I am using Vuelidate with the Vue instance. Here is my main.js file:
import { createApp } from 'vue';
import App from './App.vue';
import Vuelidate from 'vuelidate';
const app = createApp(App);
app.use(Vuelidate);
app.mount('#app');
I will also include the component code:
<template>
<div id="signup">
<div class="signup-form">
<form>
<div class="input">
<label for="email">Mail</label>
<input
type="email"
id="email"
#input="$v.email.$touch()"
v-model="email">
<div>{{ $v }}</div>
</div>
</form>
</div>
</div>
</template>
<script>
import { required, email } from 'vuelidate/lib/validators'
export default {
data () {
return {
email: '',
}
},
validations: {
email: {
required: required,
email: email
}
}
}
}
</script>
Does anyone know how to fix this? If Vue 3 is not compatible with Vuelidate, can anyone recommend and alternative that is?
Thanks
From your example, it looks like you are using Vuelidate for Vue 2. Vuelidate for Vue 3 is in alpha (as at the time of writing 30 Sep 2020) but you can still use it.
Just install the following libraries.
npm install #vuelidate/core #vuelidate/validators
# or
yarn add #vuelidate/core #vuelidate/validators
You can still use the Options API approach that you are using in your example or move to the Composition API approach.
import { ref } from 'vue'
import { useVuelidate } from '#vuelidate/core'
import { required, email } from '#vuelidate/validators'
export default {
setup () {
const email = ref('')
const rules = {
email: { required, email }
}
const $v = useVuelidate(rules, { email })
return { email, $v }
}
}
I haven't tried it myself but I hope this helps you.
Until it hits production-ready, you can find more information from the following links:
Github repo: https://github.com/vuelidate/vuelidate/tree/next
vuelidate#next doco: https://vuelidate-next.netlify.app/
EDIT:
I forgot to mention that if you continue to use the Options API approach you need to change your import statement in main.js to the following:
import { createApp } from 'vue'
import App from './App.vue'
import { VuelidatePlugin } from '#vuelidate/core'
const app = createApp(App)
app.use(VuelidatePlugin)
app.mount('#app')
I run React Native using Expo for android and I'm trying to render html file (it shows a map image) in local directory, but it doesn't work properly.
I followed several references, installed webview dependencies in expo and npm both.
The problem is that the result is just html code view, not a map image
Please see my result below:
And my react native code is this (very simple) :
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
const testHtml = require('./arcgis/arc1.html');
export default function App() {
return (
<WebView source={testHtml} startInLoadingState
scalesPageToFit
javaScriptEnabled
style={{ flex: 1 }}/>
);
}
When I compile the html file in online html website, it appears like this:
left - html code, right - result
This html file is just sample file from official gis website so my react native code must be wrong I guess.
How can I fix the problem ?
Thanks.
You have to use this module for rendering html.
https://github.com/archriss/react-native-render-html
Edit: Instead of using HTML file store your HTML into a .js file and export like this
export const MyHTML =
`<p>Here is an <em>ul</em> tag</p>
<ul>
<li>Easy</li>
<li>Peasy</li>
<li><div style="background-color:red;width:50px;height:50px;"></div></li>
<li>Lemon</li>
<li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>
<ol>
<li>Sneaky</li>
<li>Beaky</li>
<li>Like</li>
</ol>
`;
and then pass MyHTML to yoru HTML renderer.
If you are using react-native CLI, you have to place the local HTML file in specific folders native to ios and android. Meaning you will have two indez.html file: see - https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
For Expo, I used this method:
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";
import React from "react";
const MyHtmlFile = `
<p>Here is an <em>ul</em> tag</p>
<ul>
<li>Easy</li>
<li>Peasy</li>
<li><div style="background-color:red;width:50px;height:50px;"></div></li>
<li>Lemon</li>
<li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>
<ol>
<li>Sneaky</li>
<li>Beaky</li>
<li>Like</li>
</ol>
`;
const Screen = () => {
return (
<WebView
originWhitelist={["*"]}
source={{
html: MyHtmlFile,
}}
/>
);
};
export default Screen;
const styles = StyleSheet.create({});
You can use react-native-webview for rendering html file.
Here is an example
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
const myHtmlFile = require("./my-asset-folder/local-site.html");
class MyWeb extends Component {
render() {
return (
<WebView source={myHtmlFile} />
);
}
}