Vue.js 2.0 和 Meteor JS答案

【问题标题】：Vue.js 2.0 and Meteor JSVue.js 2.0 和 Meteor JS
【发布时间】：2023-03-29 19:29:01
【问题描述】：

我正在使用 Vue.js 和 Meteor 开发一个简单的应用程序。我收到一个非常奇怪的错误： 'Cannot find element 'widget'' 即使在我看来它不应该给出这种错误。这些是我的文件： Main.html

<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>

我不得不提一下，在更新到 Vue 2.0.3 之前一切正常。

【问题讨论】：

标签： javascript html meteor vue.js vuejs2

【解决方案1】：

在您的 vue 实例中，您将像这样传递 #widget1 to theel` 选项

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

但在您的 html 中，您有 id 为 app 的元素，因此将 #app 传递给 el

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

【讨论】：

[Vue 警告]：找不到元素：#app @VamsiKrishna
@Roberto 将整个template 元素放在<body></body> 标记中
如果我将模板放在正文标签中，它会显示“没有这样的模板：vue_demo”，这是有道理的，因为它会在正文标签之外搜索模板并且它不再存在。 “找不到元素#app”错误仍然存在。 @VamsiKrishna