Form.js
import React from 'react'
export default class Form extends React.Component{
handlePatientDisease(e){
this.setState({
patientdisease: e.target.value
})
}
handlePatientPresentIllness(e){
this.setState({
patientpresentillness: e.target.value
})
}
handlePatientName(e){
let patientName = e.target.value
this.setState({ patientName })
this.props.onPatientNameChange.value
}
handleSubmit(e){
e.preventDefault();
console.log("Patient name changed to:", patientName.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<ul>
<li>
<label> Nome do Paciente </label>
<input type="text" name="patientName" id="patientName" placeholder="nome do paciente" onChange={this.handlePatientName.bind(this)} />
</li>
<li>
<label> Doença
<input type="text" name="patientdisease" placeholder="disease"/>
</label>
</li>
<li>
<label> Histórico
<input type="text" name="patientpresentillness" placeholder="historia do paciente"/>
</label>
</li>
<li>
<button type="submit"> Submit </button>
</li>
</ul>
</form>
);
}
}
So, Now I already can get the data submitted in that form and show it on console. How do I display in another component now? I want to that data as a list item in that component below:
Sidebar.js
import React from 'react'
import patientName from './Form'
export default class Sidebar extends React.Component{
handlePatientNameChange(patientName){
console.log("Patient name changed to:", patientName)
}
render () {
return(
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>Alexandre Miranda</li>
<li>Felipe Neves</li>
<li>Andressa Lyra</li>
<li>Artur Lyra</li>
<li>Antonio Lyra</li>
<li>Ricardo Lyra</li>
// When I submit, I want to show the patientName here as a list item....
</ul>
</div>
</div>
</div>
);
}
}
You need some sort of common data store that is accessible by both components, your form and your sidebar.
The naive approach would be to create a global array that contains your list of patients. This is accessible from anywhere in your application and can be written from the form, as well as read from the sidebar. However, there are plenty of discussions why global variables may be a bad idea, so this solution is most likely not the preferred one.
A better option would be to keep the list in the state of a common ancestor component of the form and the sidebar. Say, if your app is structured like this:
<App>
<Form />
<Sidebar />
</App>
, instead of keeping it in the state of Form, transfer it to App, store it in its state and pass it down to Sidebar via its props.
Once your application becomes more complex, you should think about a more general approach to storing your application's data in a central place outside of your React components. While there are dozens of valid approaches to this problem, you could look into Flux or Redux as a starting point.
Your example doesn't show what's the connection between the Sidebar and the Form component. Are they rendered within the same parent component?
Generally speaking, you need to add callback to the Sidebar component into the Form component. Callback will be called on submit with the new value. Sidebar component will then update its state and re-render.
Related
I have a component with an input that when clicking opens a modal.
When I use this component, and insert it inside a div with relative position, the modal that opens, it does not display well. I would need the html of the modal to be outside the div position relative.
It is important that my component contains both the input and the modal, since this component itself will be used several times within another component.
<div class="position-relative">
<MyOwnComponet />
</div>
<div class="position-relative">
<MyOwnComponet />
</div>
My component would be something like this, more or less:
<template>
<input #click="showModal = true" />
<div class="modal" v-if="showModal">
...
</div>
</template>
I am not sure what's your point for this kind of requirement but anyway there is a workaround you can do with props.
You can have props in "MyOwnComponet" like this. And use that prop value to render accordingly.
Your main component
<div class="position-relative">
<MyOwnComponet :isInput="true" />
</div>
<div class="position-relative">
<MyOwnComponet :isInput="false" />
</div>
Your (MyOwnComponent)
<template>
<div v-if="isInput">div-1</div>
<div v-else>div-2</div>
</template>
<script>
export default {
props: {
isInput : Boolean,
},
data() {
}
};
</script>
You can replace div-1 with your input and div-2 with modal.
I got stucked with Vue.js. I am trying to basically wrap a component(that is already inside one component) into one more. I have a dropdown with a select and I call a function on change. Everything works fine until I wrap the component in one more on top. The top level one is in blade as it's used with Laravel. Snippets:
Component with dropdown:
<template>
<div id="watchlist-item">
<select #change="changed()" class="form-control"
id="currencies" name="currencyList">
<option value="USD" selected="selected">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
</template>
<script>
export default {
name: "watchlist-item.vue",
methods: {
changed() {
alert("CHANGED");
},
},
}
</script>
Wrapper:
<template>
<div id="watchlistItem">
<watchlist-item></watchlist-item>
</div>
</template>
<script>
export default {
name: "watchlist"
}
</script>
Top component:
<template>
<div id="watchlist">
<watchlist></watchlist>
</div>
</template>
<script>
export default {
name: "main-component"
}
</script>
Blade template:
#extends('layouts.layout')
<div>
{{-- <div id="maincomponent">--}}
{{-- <main-component></main-component>--}}
{{-- </div>--}}
<div id="watchlistItem">
<watchlist-item></watchlist-item>
</div>
</div>
This works fine and i get alert on change. However, when i uncomment the commented part and vice-versa (so basically wrap it one more time) vue stops aletring me. I find this behaviour pretty weird but I am just starting with Vue so maybe its just a small detail I'm missing. I don't really even know what to search for though, so any help would be greatly appreciated. Thank you.
Just make sure that you are importing child components inside it's parent correctly:
main-component > watchlist > watchlist-item
| |
has has
Well it doesnt work because you need to register it via components, but first you need to import it.
<template>
<div id="watchlistItem">
<watchlist></watchlist>
</div>
</template>
<script>
import watchlist from "path/to/watchlist";
export default {
name: "watchlist",
components: {
watchlist: watchlist
}
}
Vue.js v2.6.11 / vee-validate v3.2.2
I have a button that will push new element to form.demand (data in vue app) on click event.
And if form.demand update, html in v-for should be updated.
After I wrap it in vee-validate component , it not works.
form.demand will update, but v-for won't.
I try to put same html in test-component, when form.demand update, v-for update too.
I can't figure out why...
following is my code:
HTML
<div id="content">
<test-component>
<div v-for="demand in form.demand">{{demand}}</div>
</test-component>
<validation-provider rule="" v-slot="v">
<div #click="addDemand">new</div>
<div v-for="(demand,index) in form.demand">
<div>{{demand.name}}</div>
<div>{{demand.count}}</div>
<input type="text" :name="'demand['+index+'][name]'" v-model="form.demand[index].name" hidden="hidden" />
<input type="text" :name="'demand['+index+'][count]'" v-model="form.demand[index].count" hidden="hidden" />
</div>
</validation-provider>
</div>
javascript
Vue.component('validation-provider', VeeValidate.ValidationProvider);
Vue.component('validation-observer', VeeValidate.ValidationObserver);
Vue.component('test-component',{
template: `
<div>
<slot></slot>
</div>
`
})
var app = new Vue({
el: "#content",
data: {
form: {
demand: [],
},
},
methods: {
addDemand(){
this.form.demand.push({
name : "demand name",
count: 1
})
}
})
------------Try to use computed & Add :key----------------
It's still not work. I get same result after this change.
HTML
<validation-provider rule="" v-slot="v">
<div #click="addDemand">new</div>
<div v-for="(demand,index) in computed_demand" :key="index">
<!--.........omitted.........-->
</validation-provider>
Javascript
var app = new Vue({
el: "#content",
// .......omitted
computed:{
computed_demand() {
return this.form.demand;
}
},
})
I think I found the problem : import Vue from two different source. In HTML, I import Vue from cdn. And import vee-validate like following:
vee-validate.esm.js
import Vue from './vue.esm.browser.min.js';
/*omitted*/
validator.js
import * as VeeValidate from './vee-validate.esm.js';
export { veeValidate };
main.js
// I didn't import Vue from vue in this file
import { veeValidate as VeeValidate } from './validator.js';
Vue.component('validation-provider', VeeValidate.ValidationProvider);
HTML
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- at end of body -->
<script src="/static/javascripts/main.js" type="module"></script>
</body>
After I fix this( import vee-validate from cdn, or import Vue by ES6 module).
It works, although it still have infinite loop issue with vee-validate.
Sorry for I didn't notice that import vue from two different source.
Please provide a key in you v-for. see code below
<div v-for="(demand,index) in form.demand" :key="index">
<div>{{demand.name}}</div>
<div>{{demand.count}}</div>
<input type="text" :name="'demand['+index+'][name]'" v-model="form.demand[index].name" hidden="hidden" />
<input type="text" :name="'demand['+index+'][count]'" v-model="form.demand[index].count" hidden="hidden" />
</div>
Or, make a computed property that will hold your form.demands array, like this one
computed: {
form_demands: function() {
return this.form.demand
}
}
then call this computed property in your v-for
<div v-for="(demand,index) in form_demands" :key="index">
<div>{{demand.name}}</div>
<div>{{demand.count}}</div>
<input type="text" :name="'demand['+index+'][name]'" v-model="form.demand[index].name" hidden="hidden" />
<input type="text" :name="'demand['+index+'][count]'" v-model="form.demand[index].count" hidden="hidden" />
</div>
Or, use the vue forceUpdate method
import Vue from 'vue';
Vue.forceUpdate();
Then in your component, just call the method after you add demand
this.$forceUpdate();
It is recommended to provide a key with v-for whenever possible,
unless the iterated DOM content is simple, or you are intentionally
relying on the default behavior for performance gains.
I have an authentication page, and I have a checkbox. My main idea is to switch forms, my checkbox says 'Already have an account' if it's clicked I wanna show Sign Up form, if it's unchecked I wanna show sign in form.
I've followed this example and that's what I got inside my tag:
<div id='#selector'>
<div class="container">
<label class="bs-switch">
Already have an account
<input type="checkbox" v-model="checked">
<span class="slider round"></span>
</label>
<div class="row" v-if="checked">
</div>
</div>
</div>
I didn't copy the whole form, it's just a default bootstrap sign in page.
And inside my tag:
import Vue from 'vue'
var app = new Vue({
el: '#selector',
data: {
checked: false
}
});
It does show the checkbox, but it's not showing my Sign In card. The error:
Property or method "checked" is not defined on the instance but referenced during render.
and
"export 'default' (imported as 'vue_script') was not found in '!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./Auth.vue'
What am I missing?
Well, I've managed to fix it myself. I didn't have to import Vue or create a new vue element. I just used data function:
export default {
data: function() {
return {
checked: false
}
}
}
Hi, I'm new to ember js. Can someone please help me with my code? I have created this but I don't know how can I give action to each links. When I click on BreakFast, it should only show me 3 search box(BreadType, cheeseType and meatType) only and other should hide. same for Lunch and Drinks.
I also created route for menu in router.
--------------/////application.hbs
<h1>Welcome!!</h1>
{{#link-to 'menu'}}BreakFast{{/link-to}}
{{#link-to 'menu'}}Lunch{{/link-to}}
{{#link-to 'menu'}}Drinks{{/link-to}}
{{outlet}}
-------------/////menu.hbs
<div>
<p>Hello from BreakFast</p>
<label>
Bread Type:{{input value=bread}}
Cheese Type:{{input value=cheese}}
Meat Type:{{input value=meat}}
</label>
</div>
<div>
<p>Hello from Lunch</p>
<label>
Calories:{{input value=cal}}
Price:{{input value=price}}
Veg/Non-veg:
<select>
<option>V</option>
<option>N</option>
</select>
</label>
</div>
<div>
<p>Hello from Drinks</p>
<label>
Drink Name:{{input value=name}}
Price :{{input value=price}}
Ice: <select><option>Y</option>
<option>N</option>
</select>
</label>
</div>
one way to solve this is to use Ember's router to do most of the work for you.
First we define three nested routes under application, corresponding to breakfast, lunch, and drinks:
Router.map(function() {
this.route('breakfast');
this.route('lunch');
this.route('drinks');
});
Then, we just put the common parts in the application template, along with an {{outlet}} where nested templates will be rendered into:
// application.hbs
<h1>Welcome!!</h1>
{{#link-to 'breakfast'}}BreakFast{{/link-to}}
{{#link-to 'lunch'}}Lunch{{/link-to}}
{{#link-to 'drinks'}}Drinks{{/link-to}}
{{outlet}}
And finally, you put each menu type in the respective template:
// app/templates/breakfast.hbs
<div>
<p>Hello from BreakFast</p>
<label>
Bread Type:{{input value=bread}}
Cheese Type:{{input value=cheese}}
Meat Type:{{input value=meat}}
</label>
// app/templates/lunch.hbs
<div>
<p>Hello from Lunch</p>
<label>
Calories:{{input value=cal}}
Price:{{input value=price}}
Veg/Non-veg:
<select>
<option>V</option>
<option>N</option>
</select>
</label>
// app/templates.breakfast.hbs
<div>
<p>Hello from Drinks</p>
<label>
Drink Name:{{input value=name}}
Price :{{input value=price}}
Ice:
<select>
<option>Y</option>
<option>N</option>
</select>
</label>
</div>
And now you should only see the menu type you want! Without more information I can't really advise regarding models and data binding the fields to models.
You can also use the index route that Ember automatically creates for you to provide more template for when you visit / in your app.
Hope this helps.
Edit: I created twiddle to reflect what you requested. queryParam example with single template and controller
I would encourage you to go through official ember guides and play around with ember-twiddle. Here is my comment for your reply in discuss forum,
queryparams : [type], change this to queryparams : ['type'],
In menu.js controller file, you can't write code like you did, that will throw syntax error while compiling
import Ember from 'ember';
queryparams : [type],
export default Ember.Controller.extend({
if('breakfast'){
BreakFast:true
}
else if('lunch'){
Lunch:true
}
else if('drinks'){
Drinks:true
}
});
In menu.hbs, you have used lots properties in input helper but you haven't defined in corresponding controller/model.
I saw this question earlier in discussion.
There are many ways for your use case implementation, but I implemented it for complex requirement it will scale as well.
1.twiddle for dynamic segment implementation and included dynamic component rendering using component helper.
twiddle for queryaram and included dynamic component rendering using component helper..
I implemented using URL with dynamic segment and dynamic component rendering and component for each menu type. It may be overkill for your requirement but this will give you the better idea.
router.js
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
//introducing dynamic segment for men types
this.route('menu',{path: 'menus/:menu_id'});
});
export default Router;
routes/menu.js
import Ember from 'ember';
const { isEqual } = Ember;
export default Ember.Route.extend({
model(params){
//usually we will request data from server through ember-data or ajax call
var data = '';
if(params.menu_id === '1'){
data = { bread:' bread name',cheese:'cheese name',meat:'meat name '};
} else if(params.menu_id === '2'){
data = { cal:'200',price:'20'};
}
data.menu_id = params.menu_id;
return data;
}
});
controllers/menu.js
import Ember from 'ember';
const {computed} = Ember;
export default Ember.Controller.extend({
menuNameComponent: computed('model.menu_id',function(){
return this.get('model.menu_id') === '1' ? "menu-breakfast" : "menu-lunch";
})
});
application.hbs
<h1>Welcome!!</h1>
{{#link-to 'menu' '1'}}BreakFast{{/link-to}}
{{#link-to 'menu' 2}}Lunch{{/link-to}}
{{outlet}}
menu.hbs
<!-- component helper will dynamically load the specified component -->
{{component menuNameComponent}}
{{outlet}}
templates/components/menu-breakfast.hbs like this implement it for all the menu type.
<div>
<p>Hello from BreakFast</p>
<label>
Bread Type:{{input value=bread}}
Cheese Type:{{input value=cheese}}
Meat Type:{{input value=meat}}
</label>
</div>
{{yield}}
templates/components/menu-lunch.hbs
<div>
<p>Hello from Drinks</p>
<label>
Drink Name:{{input value=name}}
Price :{{input value=price}}
Ice: <select><option>Y</option>
<option>N</option>
</select>
</label>
</div>
{{yield}}