It is my first day learning VUE, and I'm following a tutorial by freeCodeCamp.org on YTB.
When it comes to the concept of component, the lecturer showed how to create a login form project by using components.
I followed exactly what she typed, but the code just didn't run. I'm confused why that happened.
Here is the ytb address: https://www.youtube.com/watch?v=FXpIoQ_rT_c&t=2224s , and the component section started from 00:29:20.
Here are the codes. Can anyone tell the reason plz? thx ahead!
<!DOCTYPE html>
<html>
<head>
<title>vueComponents</title>
<style type="text/css">
[v-cloak]{
display: none;
}
input {
margin: 10px;
display: block;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<login-form />
</div>
<script src="https://unpkg.com/vue#next"></script>
<script>
let app=Vue.createApp({
data():{
return{
greeting : 'hello VUE',
}
}
})
app.component ('login-form',{
template: ‘
<form #submit="handleSubmit">
<h1> {{ title }} </h1>
<input type="email" />
<input type="password" />
<button>Log In</button>
</form>
’,
data(){
return{
title:'Login Form'
}
},
methods:{
handleSubmit(){
console.log('submitted')
}
}
})
app.mount('#app')
</script>
</body>
</html>
Looks like there is an issue with quotes in the template.
Working Demo :
let app = Vue.createApp({
data() {
return {
greeting : 'hello VUE',
}
}
})
app.component ('login-form',{
template: `<form #submit="handleSubmit">
<h1> {{ title }} </h1>
<input type="email" />
<input type="password" />
<button>Log In</button>
</form>`,
data() {
return {
title:'Login Form'
}
},
methods:{
handleSubmit(){
console.log('submitted')
}
}
})
app.mount('#app')
<script src="https://unpkg.com/vue#next"></script>
<div id="app" v-cloak>
<login-form />
</div>
Related
Hey I am really new to VUE and for this project I have a button on one page which should trigger or call the function of another page. Everyone will be like why don't you have the button and function on same page as I am trying to learn basic part of how to call function of different page and then implement on my project. I am trying to make it easier and clear while I am asking question.
When I call the method function of chairPage.vue from homePage.vue, it throws an error saying world not defined on homePage.vue. Can anyone please explain why I am getting this error and what's the best way to solve this.
I have two pages one is homePage.vue and another one is chair.Vue. I have a button on homePage.vue which should call the method function of chairPage.vue.
Home Page
<template>
<div id="homepage">
<b-button variant="info" #click="buttonClicked()">Click</b-button>
<chairComponent ref="world"/>
</div>
</template>
<script>
import chairComponent from '#/components/chair.vue';
export default {
props: [],
methods:{
buttonClicked(){
this.$refs.world.hello();
}
}
}
</script>
Chair Page
<template>
<div id="chairComponent">
<p v-if="displayText == '1'"> HELLO WORLD </p>
</div>
</template>
<script>
export default {
props: ['world'],
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
this.displayText = '1';
}
}
}
</script>
You can pass props to your child component, and there watch on props and call function:
Vue.component('Chair', {
template: `
<div id="chairComponent">
<p v-if="displayText == '1'"> HELLO WORLD </p>
</div>
`,
props: ['world'],
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
this.displayText = '1';
}
},
watch: {
world() {
if (this.world) this.hello()
}
}
})
new Vue({
el: '#demo',
data() {
return {
val: null
}
},
methods:{
buttonClicked(){
this.val = true
setTimeout(() => {this.val = false},0)
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div id="homepage">
<b-button variant="info" #click="buttonClicked">Click</b-button>
<chair :world="val" />
</div>
</div>
It works perfectly fine in the below snippet
Vue.component('Chair', {
template: `
<div id="chairComponent">
</div>
`,
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
}
},
})
new Vue({
el: '#demo',
methods:{
buttonClicked(){
this.$refs.world.hello();
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div id="homepage">
<b-button variant="info" #click="buttonClicked">Click</b-button>
<chair ref="world" />
</div>
</div>
I guess adding the components section in the homepage.vue might make it work
<template>
<div id="homepage">
<b-button variant="info" #click="buttonClicked()">Click</b-button>
<chairComponent ref="world"/>
</div>
</template>
<script>
import chairComponent from '#/components/chair.vue';
export default {
props: [],
// New changes added below
components: {
chairComponent
},
methods:{
buttonClicked(){
this.$refs.world.hello();
}
}
}
</script>
You can $emit from children to parent
https://v2.vuejs.org/v2/guide/components-custom-events.html
Child
hello () {
...//yours code
this.$emit('customEvent', someValue)
}
Parent
<template>
<child
#cutomEvent="function"
/>
<template>
I'm trying to make a simple form validation page work with vee-validate. Something appears to be broken though, and I am unsure what exactly I am doing wrong.
How am I getting the error: errors not defined.
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<div id="app">
<h1>asdfasd</h1>
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/3.0.5/vee-validate.full.min.js"></script>
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
template: '#app',
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
You seems to use veevalidate 3 instead of veeValidate 2. I have updated the veevalidate to version 2 in my answer as well as adding v-model="email_primary"
Since you have a template already, I have removed template: '#app',. Kindly see below
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<div id="app">
<h1>asdfasd</h1>
<form action='#' method='POST'>
<input v-model="email_primary" v-validate="'required|email'"
:class="{'input': true, 'is-danger': errors.has('email_primary') }"
name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.15/vee-validate.min.js"></script>
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
Here is a working fiddle. I hope my answer will help.
So this is the most simplified version of the program that I am trying to create.
Basically I want to change the display from Component 1 to Component 2 with the click event of of button. Whenever I click the button I want to change from component 1 to component 2 and vice versa.
To create a this program I have used a JavaScript event .onclick, but somehow I don't know why this is not working. My console log is not even showing any error message.please help Thank you
I have also tried using a v-on event but that is not working.
<html>
<head>
<title></title>
<style media="screen">
#inp{
height:100px;border:1px solid black;
}
</style>
<script type="text/javascript" src='vue.js'></script>
</head>
<body>
<div id='main_area'>
<button id='button1' type="button" name="button">Click Here</button>
<div id='inp'>
</div>
</div>
<template id="first_comp">
<div class="FC1">
<h1>This is component 1</h1>
</div>
</template>
<template id="second_comp">
<div class="SC1">
<h1>This is component 2</h1>
</div>
</template>
<script type="text/javascript">
var elem=document.getElementById('inp');
var swic=true;
elem.innerHTML='<comp1></comp1>';
var btn=document.getElementById('button1');
btn.onclick=function(){
if (swic==true) {
swic=false;
elem.innerHTML='<comp2></comp2>'
}
else {
swic=true;
elem.innerHTML='<comp1></comp1>';
}
}
Vue.component('comp1',{
template:'#first_comp',
data:function(){
return{
}
},
})
Vue.component('comp2',{
template:'#second_comp',
data:function(){
return{
}
},
})
var vvm= new Vue({
el:'#main_area',
data:{
},
})
</script>
</body>
</html>
The console log is not showing any error message
I'm new to VueJS and am trying to make a small page builder application where you can create sections and add subsections to each of those. I'm not sure how to setup the Vue data property to allow this. Any insight on how you would go about doing something like this would be appreciated. Here's my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<form>
<input type="text" v-model="title"> {{title}}<br>
<button type="button" v-on:click="addSection()">Add Section</button>
</form>
<h1>Sections</h1>
<div v-for="(section, index) in sections">
<h2>{{section.title}}</h2>
<form>
<input type="text" v-model="subTitle"> {{subTitle}}<br>
<button type="button" v-on:click="addSubSection()">Add SubSection</button>
</form>
<div v-for="(subsection, index) in subsections">
<h3>{{subsection.subTitle</h3>
</div>
</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
title: '',
sections: []
},
methods: {
addSection: function(e) {
this.sections.push({title: this.title});
this.title = '';
},
addSubSection: function(sectionIndex) {
this.sections[sectionIndex].push({subTitle: this.subTitle});
this.subTitle = '';
}
}
});
</script>
</body>
Each of your sections is an object, not an array so this.sections[sectionIndex].push() won't work. You should probably add a sections property to each new section, eg
this.sections.push({ title: this.title, sections: [] })
and when adding a sub-section
this.sections[sectionIndex].sections.push({ subTitle: this.subTitle })
You should also have a data property for subTitle
1.I am a beginner of vue.js, but when I was trying some examples, I found something uncommon. The first one is when I set id in the body, and write my js code as followed:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/semantic.css">
<script type="text/javascript" src="js/vue.js">
</script>
<title></title>
</head>
<body style="background-color:black;" id="app">
<div class="ui container" style="margin:20px;">
<div class="ui segment">
<h1>{{ title }}</h1>
<p>
{{ message }}
</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello, world!",
title: "How about you?"
}
})
</script>
</body>
</html>
And this is my result which does not show me data :
2.And the second problem is when I created an object in the data, and I refer it as followed, it also does not work in the div label.
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/semantic.css">
<script type="text/javascript" src="js/vue.js">
</script>
<title></title>
</head>
<body style="background-color:black;">
<div class="ui container" style="margin:20px;">
<div class="ui segment" id="app">
<h1>{{ article.title }}</h1>
<p>
{{ article.message }}
</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
article{
message: "Hello, world!",
title: "How about you?"
}
}
})
</script>
</body>
</html>
So I wonder if there some conflicts when I was using semanticUI and vue.js?
As a best practice, you can create a top level div#app, like this:
var app = new Vue({
el: "#app",
data: {
message: "Hello, world!",
title: "How about you?"
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<body style="background-color:black;">
<div id="app"><!-- just a wrapper for vuejs -->
<div class="ui container" style="margin:20px;">
<div class="ui segment">
<h1>{{ title }}</h1>
<p>
{{ message }}
</p>
</div>
</div>
</div>
</body>