2017-06-28 3 views
0

Ich entwickle eine einfache App mit Vue js und Meteor. Ich bekomme einen sehr seltsamen Fehler: 'Kann Element' Widget ' nicht finden, obwohl es meiner Meinung nach sollte es nicht diese Art von Fehler geben. Das sind meine Dateien: Main.htmlVue JS 2.0 und Meteor JS

<head> 
<title>vue-blaze</title> 
</head> 

<body> 
<h1>Welcome to Meteor!</h1> 
{{> vue_demo}} 
</body> 

<template name="vue_demo"> 
<div id="app"> 
</div> 
</template> 

main.js

import { Template } from 'meteor/templating'; 
import { Session } from 'meteor/session'; 

import './main.html'; 


import {Vue} from 'meteor/akryum:vue'; 
import widget from '/imports/ui/Widget.vue'; 

//window.onload=function(){ 
var vm = new Vue({ 
el: '#widget', 
render:h=>h(widget) 
}); 
//} 

Widget.vue

<template> 
<div id="widget"> 
<div>Hello {{msg1}}!</div> 
<input v-model="name" placeholder="Enter your name" /> 
</div> 
</template> 

<script> 
import {Session} from 'meteor/session' 
export default { 
data() { 
return { 
    msg1: 'Somebody' 
} 
} 
} 
</script> 

<style scoped> 
.widget { 
background: #a0ddc4; 
padding: 12px; 
border-radius: 3px; 
width: 300px; 
border-bottom: solid 1px #40b883; 
} 

input { 
display: block; 
margin: 4px 0; 
width: 100%; 
box-sizing: border-box; 
border: none; 
padding: 6px 12px; 
border-radius: 3px; 
} 
</style> 

Ich habe zu erwähnen, dass alles funktionierte vor dem Update auf Vue 2.0.3.

Antwort

0

In Ihrem vue Exemplar, das Sie vorbei #widget1 to the el` Option wie diese

var vm = new Vue({ 
el: '#widget', 
render:h=>h(widget) 
}); 
//} 

Aber in Ihrem HTML haben Sie das Element mit der ID app so passieren #app zu el

var vm = new Vue({ 
el: '#app', 
render:h=>h(widget) 
}); 
//} 
+0

[Vue warnen] : Element kann nicht gefunden werden: #app @VamsiKrishna – Roberto

+0

@Robert legen Sie das gesamte 'template' Element in die' 'Markierung –

+0

Wenn ich die te mplate im Body-Tag sagt es "Keine solche Vorlage: vue_demo" was sinnvoll ist, da es nach einer Vorlage außerhalb des Body-Tags suchen wird und es nicht mehr da ist. Der "Can not find element #app" Fehler bleibt jedoch bestehen. @ VamsiKrishna – Roberto