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
}
}
}
Related
I am developing a Vuejs application within which I have a field extension. For this field, users can provide the values and this field expands dynamically (both vertically and horizontally) based on the user-provided values.
I am using the recursive component ExtensionComponent to display and store the values. But it's not working as expected for me.
The field name extensions displays, initially an Add Extension. With on click of the button, a bootstrap modal will be displayed which has 3 fields: namespace (text), localname (text), datatype(dropdown: string/complex). If the datatype is string then a simple text field will be displayed. However, if the datatype is complex then another button should be displayed and on click of the button again the same bootstrap modal is displayed with fields and the process continues. So the created JSON based on this will expand horizontally and vertically.
I am able to create the Vue component to show the recursive data but I am a bit confused about the addition of the values to extensionList array dynamically. Can someone please help me with this issue?
Following is my Test.vue page which will display the Extensions and Add Button:
<template>
<div>
<span>Extensions</span>
<button class="btn btn-primary" #click="createExtensions">
Add Another
</button>
<ExtensionComponent :extension-list="$store.state.extensionList" />
<TestModal v-if="$store.state.showModal" />
</div>
</template>
<script>
import TestModal from '#/components/TestModal.vue'
export default {
computed: {
TestModal
},
methods: {
// Method to create extensions and add
createExtensions () {
this.$store.commit('toggleExtensionModal')
}
}
}
</script>
<style>
</style>
Following is my Bootstrap modal (TestModal.vue) which will be displayed whenever Add Another button is clicked (initially and for complex):
<template>
<b-modal
id="Extension"
title="Add Another Element"
size="lg"
width="100%"
:visible="$store.state.showModal"
>
<b-form id="AddExtension" #submit.prevent="submitExtension">
<div class="form-group">
<label for="message-text" class="col-form-label">Namespace URI:</label>
<input
v-model="extension.namespace"
type="text"
class="form-control"
required
>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Local Name:</label>
<input
v-model="extension.localName"
type="text"
class="form-control"
required
>
</div>
<div class="form-group">
<label
for="AddExtensionDataType"
class="col-form-label"
>Data Type:</label>
<b-form-select v-model="extension.dataType" class="form-control">
<b-form-select-option value="string">
String
</b-form-select-option>
<b-form-select-option value="complex">
Complex
</b-form-select-option>
</b-form-select>
</div>
</b-form>
<template #modal-footer="{ cancel }">
<b-btn #click="cancel">
Cancel
</b-btn>
<b-btn variant="primary" type="submit" form="AddExtension">
OK
</b-btn>
</template>
</b-modal>
</template>
<script>
export default {
data () {
return {
extension: {
namespace: '',
localName: '',
dataType: 'string'
},
showModal: false
}
},
methods: {
submitExtension () {
// Call vuex store to save information
this.$store.commit('addExtension', this.extension)
// Hide modal after submitting modal
this.$store.commit('toggleExtensionModal')
}
}
}
</script>
<style>
</style>
Following is my ExtensionComponent.vue which will display data recursively:
<template>
<div>
<div
v-for="extension in extensionList"
:key="extension.ID"
class="form-inline"
>
<span>{{ extension.namespace + ":" + extension.localName }}</span>
<input
v-if="extension.dataType == 'string'"
type="text"
#input="$emit('AddExtensionText', {$event, id: extension.ID})"
>
<ExtensionComponent v-if="extension.dataType == 'complex'" :extension-list="extension" #AddExtensionText="AddExtensionText($event)" />
<button
v-if="extension.dataType == 'complex'"
#click="AddComplextExtension(extension.ID, extension)"
>
Add another
</button>
</div>
</div>
</template>
<script>
import ExtensionComponent from '#/components/ExtensionComponent.vue'
export default {
components: {
ExtensionComponent
},
props: {
extensionList: Array,
extension: Object
},
methods: {
AddComplextExtension (extensionID, extension) {
this.$store.commit('modules/ExtensionDataStore/showExtensionModal')
},
AddExtensionText ({ value, id }) {
const i = this.extensionList.findIndex(el => el.ID === id)
this.$set(this.extensionList, i, value)
}
}
}
</script>
Following is my index.js Vuex store:
export const state = () => ({
extensionID: 0,
extensionList: [],
showModal: false
})
export const mutations = {
toggleExtensionModal (state) {
// Function to show/hide the extension Modal
state.showModal = !state.showModal
},
addExtension (state, extension) {
console.log(extension)
extension.ID = state.extensionID
state.extensionList.push(extension)
state.extensionID++
}
}
export const actions = {}
Following is the front-end I have:
I want to create JSON and show it something like this:
As we can see if the value is complex then the field is created dynamically and displayed in a parent-child relationship way. I am a bit confused about how to establish the parent-child relationship within complex JSON and show them to the user. Someone,Ad
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 started using vuejs with parcel. I have a main component App.vue from which I call a subcomponent Hello.vue using <Hello/> in App's template. I have a weird bug if I don't put the <Hello/> inside a div tag, everything that comes after in html doesn't show. The code is below:
index.js
import Vue from "vue";
import App from "./App";
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
App.vue
<template>
<div id="app">
<h3>bla bla</h3>
<div><Hello/></div>
<!-- if not put inside a div, hides everything after-->
<h2>test</h2>
<p>kldsfnlkdsjfldsfds</p>
<h5>skjdnsqkfdnlkdsqf</h5>
</div>
</template>
<script>
import Hello from "./components/Hello";
export default {
name: "App",
components: {
Hello
}
};
</script>
<style>
</style>
Hello.vue
<template>
<div>
<h1>{{ message }}</h1>
<h2>Hello {{ person.firstname}} {{person.lastname}}</h2>
<label>
Firstname:
<input type="text" v-model="person.firstname">
</label>
<label>
Lastname:
<input type="text" v-model="person.lastname">
</label>
<label>
Message:
<input type="text" v-model="message">
</label>
</div>
</template>
<script>
export default {
data() {
return {
person: {
firstname: "John",
lastname: "Doe"
},
message: "Welcome !"
};
}
};
</script>
<style>
</style>
Here is a screenshot of what I get without wrapping <Hello/> with a <div></div>
And then with a div:
Thanks !
EDIT: I don't get an error in the console. I forgot to add that I tried with webpack and I don't get this bug, so It's most likely related to parcel.
Some browsers do not display elements correctly if they use <foo /> without a closing tag, instead of <foo></foo>.
If items are not rendered with the closing tag, this may be your issue.
Some vue components will generate the closing tag from your template, even though you do not have it in your source, and others will not.
When you use a SFC (Single File Component) you must have only one element inside the <template>. Then, inside that one element you can have as many other elements as you like.
Have a look at the "Example sandbox" Simple to do app in the official documentation: https://v2.vuejs.org/v2/guide/single-file-components.html#Example-Sandbox
The file ToDoList.vue is a good example in here: https://codesandbox.io/s/o29j95wx9
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.