After I select or change an option from the ReactSelect
The email fields (actually, all other fields will be cleared)
How come?
Form.jsx
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
<Field
name="selectedTable"
value={selectedTable}
tableList={this.props.tableList}
selectTableChange={this.props.selectTable}
component={TableNameSelect}
/>
ReactSelect.jsx
import * as React from 'react'
import {connect} from 'react-redux'
import {Field} from 'redux-form'
import * as ReactSelect from 'react-select';
<ReactSelect
{...input}
value={input.value}
options={tableListOptions}
placeholder="Select Table..."
onChange={(option:any)=>{
selectTableChange(option.value)
input.onChange(option)
}}
onBlur={
(e:any) => {
input.onBlur(input.value)
console.log(this.props)
}
}
/>
Related
I want to install ckeditor to add blog posts to my Laravel 9 mix and vue js 3 project. If I do as the ckeditor says on his page, the ckeditor will not appear unless he makes a mistake
enter image description here
App.js
require('./bootstrap');
import { createApp } from "vue";
import App from './components/App';
import router from './router'
import store from "./store/store";
import AOS from 'aos'
import 'aos/dist/aos.css'
import CKEditor from '#ckeditor/ckeditor5-vue';
const app = createApp({});
app.AOS = new AOS.init();
app.component('my-app',App);
app.use(router)
app.use(store);
AOS.init();
app.mount('#wrapper');
createApp( { /* options */ } ).use( CKEditor ).mount( /* DOM element */ );
newBlog.vue file
<script setup>
import {mapGetters} from "vuex";
</script>
<template>
<div id="app">
<form #submit.prevent>
<div class="form-row mb-4">
<label>Blog adi</label>
<div class="form-group col-md-12">
<input class="form-control w-100" v-model="blogName">
</div>
</div>
<div class="form-row mb-4">
<label>Blog yazısı</label>
<div>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</div>
<button type="button" #click="send()" class="btn btn-primary mt-3">Redaktə et</button>
</form>
</div>
</template>
<script>
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
export default {
name: 'app',
data() {
return {
blogName: '',
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
// The configuration of the editor.
}
};
}
}
</script>
Export
enter image description here
I am trying to use the latest alpha release of vee-validate. Is it possible to use vee-validate 4 (alpha)'s Form and Field components with Vuetify for validation?
In the example in Vuetify documentation for validation with vee-validate, it only shows use of validation-observer and validation-provider.
Here a good example for veevalidate4, vuejs3 and vuetify3 (typescript,nuxtjs and YUP):
example configuration
in practice
<template>
<div>
<v-app id="inspire">
<v-container fluid fill-height>
<v-row vertical-align="center">
<v-col lg="6" sm="12" align-self="center" offset-lg="3">
<v-card class="elevation-12">
<v-toolbar dark color="success">
<v-toolbar-title>Se connecter</v-toolbar-title>
</v-toolbar>
<v-card-text>
<Form #submit="onSubmit" :validation-schema="schema">
<Field name="username" v-slot="{ field, errors }">
<v-text-field
name="username"
label="Login"
type="email"
v-bind="field"
variant="solo"
append-inner-icon="mdi-magnify"
:error-messages="errors"
></v-text-field>
</Field>
<Field name="password" v-slot="{ field, errors }">
<v-text-field
id="password"
prepend-inner-icon="fa:fas fa-lock"
name="password"
label="Password"
v-bind="field"
type="password"
variant="solo"
:error-messages="errors"
></v-text-field>
</Field>
<v-btn
block
color="success"
size="large"
type="submit"
>
Se connecter
</v-btn>
</Form>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</template>
<script lang="ts" setup>
const {REST_API_URL} = useRuntimeConfig();
import {Form, Field, ErrorMessage} from "vee-validate";
import * as Yup from "yup";
const schema = Yup.object().shape({
username: Yup.string().required("Email is mandatory.").email("The email
entered doesn’t seem right, please try again."),
password: Yup.string().required("Full name is mandatory."),
});
const props = defineProps({
source: String,
})
function onSubmit(values: any) {
console.log('Submitted with', values);
const {data: token, error, pending} = useFetch(REST_API_URL + '/auth/signin', {method: "POST", body: values})
}
vee-validate v4 does not support Vue 2 at the moment unless Vuetify has also released support for Vue 3 there is no way to use the two at the moment.
Supporting Vue 2 and 3 at the same time is a very hard task for complex libraries such as Vuetify and vee-validate
I can't apply Bootstrap to my project.
import {Button, Form, Label, Input, Modal, ModalBody} from 'react-
bootstrap';
In my index.html I have a link to CDN.
I am confused because import worked in very similar project but with another imported components.
My render method
render() {
return (
<div>
...
<Modal name='modal' isOpen={this.state.showModal}>
<ModalBody>
Please add a popup for a location.
<Form name="form">
<Label for="Popup">Popup</Label>
<Input type="text" name="popup" id="popup" placeholder="Popup"/>
<Button bsStyle="primary" type="submit"
onClick={(e)=>this.submit(e)}>Add</Button>
</Form>
</ModalBody></Modal>
</div>
)
}
}
My imports to MapComponent component
import React, {Component} from 'react';
import {Button, Form, Label, Input, Modal, ModalBody} from 'react-
bootstrap';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'
My imports to the App component
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import React from 'react';
import { Router, Route, hashHistory } from 'react-router';
import MapComponent from './MapComponent.jsx';
import styles from '../../css/styles.css';
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of MapComponent.
in MapComponent (created by RouterContext)
in RouterContext (created by Router)
in Router (created by App)
in App
Using CDN link you cannot import modules like,
import {Button, Form, Label, Input, Modal, ModalBody} from 'react-
bootstrap';
You need to install react-bootstrap.
npm install react-bootstrap --save
or
yarn add react-bootstrap
Update
You are importing {Button, Form, Label, Input, Modal, ModalBody} from react-bootstrap but you are using reactstrap code for your modal,
import {Button, Form, Label, Input, Modal, ModalBody} from 'react-bootstrap';
This is code for reactstrap modal
<Modal name='modal' isOpen={this.state.showModal}>
<ModalBody>
Please add a popup for a location.
<Form name="form">
<Label for="Popup">Popup</Label>
<Input type="text" name="popup" id="popup" placeholder="Popup"/>
<Button bsStyle="primary" type="submit"
onClick={(e)=>this.submit(e)}>Add</Button>
</Form>
</ModalBody></Modal>
You can change your import to make your code work
import {Button, Form, Label, Input, Modal, ModalBody} from 'reactstrap';
OR
If you want to use react-bootstrap modal then this is the code for modal
<Modal.Dialog>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Modal body text goes here.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close</Button>
<Button variant="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
Have this part of code form:
<RadDataForm id="loginForm" ref="loginForm" :source="user">
<TKEntityProperty v-tkDataFormProperty name="password" displayName imageResource="res://lock" hintText="Password" index="0">
<TKPropertyEditor v-tkEntityPropertyEditor type="Password">
<TKPropertyEditorStyle v-tkPropertyEditorStyle labelWidth="4" />
</TKPropertyEditor>
</TKEntityProperty>
</RadDataForm>
Need to append icon/image can tap to show/hide password
If I'm not wrong, CustomPropertyEditor is not yet exposed as Vue directive in latest version of nativescript-ui-dataform plugin (as of today v4.0.0).
So you will have to register it first along with RadDataForm, may be something like
import Vue from 'nativescript-vue';
import * as RadDataFormModule from "nativescript-ui-dataform";
import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);
Vue.registerElement("TKCustomPropertyEditor", function () {
return RadDataFormModule.CustomPropertyEditor;
});
Now simply use TKCustomPropertyEditor instead of TKPropertyEditor
<TKEntityProperty v-tkDataFormProperty name="password">
<TKCustomPropertyEditor v-tkEntityPropertyEditor
#editorNeedsView="onPasswordEditorNeedsView">
</TKCustomPropertyEditor>
</TKEntityProperty>
Now you can create and assign the view you like on the editorNeedsView event as described in the docs.
I have a component RecipeList and another AddRecipe.after adding a recipe it should be redirected to RecipeList and all items be displayed.
here is the code of AddRecipe Component.
import React ,{Component}from 'react'
import { Mutation } from "react-apollo";
import {ADD_RECIPE} from '../../mutations';
import Error from '../Error';
import {withRouter} from 'react-router-dom';
import {GET_ALL_RECIPIES} from '../../queries'
class AddRecipe extends Component {
...
onSubmit(event,addRecipe){
event.preventDefault();
addRecipe().then(
({data})=>
{
this.props.history.push("/")
}
)
}
render (){
const{name,category,description,instruction,username} = this.state;
return(<div className="App">
<h2>Add recipe</h2>
<Mutation
mutation={ADD_RECIPE}
variables={{name,category,description,instruction,username}}
update={(cache, {data:{addRecipe}}) => {
const {getAllRecipes} = cache.readQuery({ query: GET_ALL_RECIPIES });
cache.writeQuery({
query:GET_ALL_RECIPIES,
data:{getAllRecipes:getAllRecipes.concat[addRecipe]}
})
}} >
{(addRecipe, {data,loading,error})=>
(<form className="form" onSubmit={event=>this.onSubmit(event,addRecipe)}>
<input type="text" name="name" onChange={this.handleChange.bind(this)} placeholder="recipe name" value={name}/>
<select name="category" value="breakfast" id="" onChange={this.handleChange.bind(this)} value={category}>
<option value="breakfast">breakfast</option>
<option value="lunch">lunch</option>
<option value="dinner">dinner</option>
<option value="snack">snack</option>
</select>
<input type="text" name="description" onChange={this.handleChange.bind(this)} placeholder="recipe description" value={description}/>
<textarea name="instruction" id="instruction" cols="30" rows="10" onChange={this.handleChange.bind(this)} value={instruction}> </textarea>
<button type="submit" className="button-primary" disabled = {loading || this.validateForm()}>submit</button>
{error && <Error error={error}/>}
</form>)
}
</Mutation>
</div>)
}
my add recipe mutation is :
import gql from 'graphql-tag';
//RECIPE QUERY
export const GET_ALL_RECIPIES =gql`
query {
getAllRecipes{
name
_id
category
}
}
`
and finally get recipe list query is :
import gql from "graphql-tag";
export const GET_RECIPE_ITEM =gql`
query($id:ID!){
getRecipeItem(_id:$id){
_id
name
category
description
instruction
createdDate
likes
username
}
}`
after submitting form and adding recipe I expect that
first component is redirected to recipe list and
second component the list of recipes includes the newly added recipe .
but I see the old list that does not contain any of newly added recipes and for displaying new components I should refresh the page .
Apollo Client caches data for performance improvements and it does not refetch a list of your recipes because it already in cache.
In order to overcome this, you can either change fetchPolicy from default cache-first to cache-and-network or network-only but I don't recommend this in your case or refetch getAllRecipes query after addRecipe mutation like so:
<Mutation
mutation={ADD_RECIPE}
variables={{name,category,description,instruction,username}}
refetchQueries=['getAllRecipes']
>
...
</Mutation>