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
Related
I have a code like below. 5 first componets are rendered correctly, but next 3 are not. Only first one from those 3 is rendered:
const test = {
data() {
return {
count: 0
};
},
props: {
text: {
type: Number,
required: true
}
},
template: `
<button #click="count++">
[ {{text}} ] You clicked me {{ count }} times.
</button>
`
};
const app = Vue.createApp({});
app.component("test", test);
app.mount("#app");
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div v-for="i in 5">
<test :text="i" />
</div>
<hr />
<test :text="99" />
<test :text="42" />
<test :text="55" />
</div>
<script
id="vue"
src="https://unpkg.com/vue#3.0.11/dist/vue.global.prod.js"
></script>
</body>
</html>
Obviously... I want to be able to use components not only in the loops. What I missed?
BTW, this same behavior I was able to reproduce with latest vue 2.x (with slightly different vue app initialization code, ofc)
The problem is caused by self-closing elements. See updated demo below...
Why
In HTML5 spec, self closing tags are allowed only on "void" elements (Void elements are those that may not ever contain any content - as br, img etc.) - see this SO question - Are (non-void) self-closing tags valid in HTML5?
So what happens here is that your not valid HTML is interpreted by the browser (when the page is loaded - even before Vue is started) like this (just run your snippet, comment out app.mount() and inspect the HTML in the Dev Tools):
<div id="app">
<div v-for="i in 5">
<test :text="i"></test>
</div>
<hr>
<test :text="99">
<test :text="42">
<test :text="55">
</test>
</test>
</test>
</div>
Now it is easy to see why v-for works ok, 1st component is rendered ok but the rest is not (test component has no default slot)
Note this is problem only when using in-DOM templates and works fine with string templates (template option) or SFC files (and self-closing tags are actually recommended by Vue ESLint rules and Vue style guide)
const test = {
data() {
return {
count: 0
};
},
props: {
text: {
type: Number,
required: true
}
},
template: `
<button #click="count++">
[ {{text}} ] You clicked me {{ count }} times.
</button>
`
};
const app = Vue.createApp({});
app.component("test", test);
app.mount("#app");
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div v-for="i in 5">
<test :text="i"></test>
</div>
<hr />
<test :text="99" ></test>
<test :text="42" ></test>
<test :text="55" ></test>
</div>
<script
id="vue"
src="https://unpkg.com/vue#3.0.11/dist/vue.global.prod.js"
></script>
</body>
</html>
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
}
}
}
I am developing a simple web app with Meteor and Vue and I came across this problem. Cannot find element: #app. I have searched and searched, added some 'solutions' to my problem but still no result.
missionPage.vue
<template>
<div class="ui center aligned container ">
<div class="missionPage">
<h3 class="ui header">Our story</h3>
<p>{{text1}}</p>
<p>{{text2}}</p>
<h1>Trigger question?</h1>
<a href="#" type="button" id="scrollDownArrow"><i class="huge angle double
down icon" ></i></a>
</div>
</div>
</template>
<script>
import { Session } from 'meteor/session';
export default {
data() {
return {
text1:'abc',
text2:'def'
}
},
}
</script>
missionPage.html
<template name='missionPage'>
<div id="app">
</div>
</template>
missionPage.js
import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import { Vue } from 'meteor/akryum:vue';
import missionPage from '/client/template/missionPage.vue';
window.onload=function(){
var app = new Vue({
el: '#app',
render:h=>h(missionPage)
})
}
It seems that it doesn't recognize the #app id which is mind-blowing in my opinion. I have exactly the same code ran in another app and it works perfectly. I have red other posts and added the 'window.onload' function as it turns out that the reason why the element is not recognized is that it was not loaded but still the error persists.