Handlebars.js file that done not load if it is placed VueJs container (#app).
<script id="details-template" type="text/x-handlebars-template">
<div class="label label-info"> #{{ domain }}'s Email</div>
</script>
I get the error message raised by Vue.
[Vue warn]: Property or method "domain" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
When I remove the #app id from the container, handlebar template works fine. I have tried to change the VueJs delimiter in app.js file
const app = new Vue({
el: '#app',
delimiters: ["<%","%>"]
});
It did not work.
What could be the solution?
It's because your domain variable is not defined and you are trying to use it in your HTML. You should initialize the variable and then use it. try this:
const app = new Vue({
el: '#app',
delimiters: ["<%","%>"],
domain: null
});
Related
I'm just trying to use a v-range-slider component from vuetify, but i don't know why it is throwing 'addEventListener' of undefined.
I'm doing a basic use of it and it keeps failing. Sometimes it works the first time but then breaks.
Here's their doc
And a fiddle
VUE Component:
new Vue({
el: "#app",
data () {
return {
value1: [30, 60],
}
}
})
HTML Template:
<div id="app">
<v-range-slider
color="red"
v-model="value1"
></v-range-slider>
</div>
I don't know what else can I do xD
Is someone facing the same problem? Thanks!
As you can see in the warning:
vuetify.min.js:6 [Vuetify] Missing v-app or a non-body wrapping element with the [data-app] attribute
You just need to add a v-app wrapper in your example to make Vuetify work correctly
Here's a working jsfiddle
I'm using Vue2 with Vuex.
I have a list of posts from https://jsonplaceholder.typicode.com/posts
I want to show it in descending order.
for that, I created a filter named "desc" in main.js and applied to my component posts.vue like this.
<li v-for="post in posts | desc" :key="post.id">
this is my main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/store'
Vue.config.productionTip = false
Vue.filter('desc', function(arr){
if(arr) return arr.reverse();
});
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
it gives me the following error:
[Vue warn]: Property or method "desc" is not defined on the instance
but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property. See:
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
I thought it may cause this error until http get request comes with the response. To troubleshoot this I also tried with static json data but still shows this error.
can any one help me out solving this?
Try using slice().reverse() in v-for.
<li v-for="post in posts.slice().reverse()">
//do something here
</li>
I want to put vue instance inside a vue instance so i can use the the dom element as my template and not write the template in the javascript code
ie
{ template : 'template for the component' }
example :
main.js
var v2 = new Vue({
el: '#child',
data : {
msg1 : 'child msg'
}
});
Vue.component(v2);
var v = new Vue({
el: '#parent',
data : {
msg : 'parent msg'
}
});
index.html
<div id="parent">
<h1>{{msg}}</h1>
<div id="child">
{{msg1}}
</div>
</div>
as you can see i dont use template i use the el property so my template come from the html on the page the element #parent and #child in this case also as you can see i dont give a name to the component and i just register the vue instance as a component Vue.component(v2);
and not Vue.component('child',v2); for example
now this is working and everything is good but there is no documentation
to this all the examples show how you can register a component with a template to a vue instance
because there is no documentation I am a afraid that in the next version of vue may be it will not work any more
someone know if this is the case or not
I want to use an npm module which is based on Vue:
Persian Date & Time Picker For Vue.js
because I'm not familiar with node.js, I used wzrd.in to get a window.vuePersianDatetimePicker object:
https://wzrd.in/standalone/vue-persian-datetime-picker#latest
I used it in my code(I only include contents of my body tag):
<div id="app">
<date-picker></date-picker>
</div>
<script src="vue.js"></script>
<script src='https://wzrd.in/standalone/vue-persian-datetime-picker#latest'></script>
<script>
Vue.component('date-picker',vuePersianDatetimePicker)
new Vue({
el: "#app",
});
</script>
but I cannot use it and get the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
I looked at the contents of vuePersianDatetimePicker object and found the solution.
I should have used vuePersianDatetimePicker.default instead of vuePersianDatetimePicker
Details
I am working on a website with different page setups.
My setup is not an SPA and so I do not have the privalige of one single root instance.
Problem
This means that if I create a component I have to register a root vue instance every time I want to use my component.
Example of the issue
I create my custom component as a global component:
Vue.component('mycomponent', { /* options */ });
According to the vue docs I have to register a root instance in order to use my component
new Vue({ el: '#root-instance' });
<div class="header" id="root-instance">
<mycomponent></mycomponent>
</div>
Then in a different section I want to use the same component but I have to create another root instance:
new Vue({ el: '#other-root-instance' });
<div class="sidebar" id="other-root-instance">
<mycomponent></mycomponent>
</div>
I tried using a class for instantiating, something like:
new Vue({ el: '.root-instance' });
But view only loads this once.
Question
Is there any way to load a component but not instantiate a root instance every time I use it?
Note: I have several root instances on the page and therefore can not declare a single root instance for the page. Effectively I do not want to make my page a Single Page App.
You don't have to wrap your component in a root instance div, you can make the component tag the root instance.
Vue.component('myComponent', {
props: ['custom'],
template: '<div>Hi there, I am the {{custom}}</div>'
});
new Vue({
el: '#sidebar'
});
new Vue({
el: '#topmenu'
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<my-component id="sidebar" custom="sidebar"></my-component>
<div>
Some stuff that is not under Vue control {{custom}}
</div>
<my-component id="topmenu" custom="top menu"></my-component>