VueJS 组件不会在前端呈现（可能是 Drupal 问题）
Posted
技术标签:
【中文标题】VueJS 组件不会在前端呈现（可能是 Drupal 问题）【英文标题】：VueJS component won't render on front end (possibly Drupal issue) 【发布时间】：2016-10-26 22:07:36 【问题描述】：我目前正在开发的网站是在 Drupal 7 中构建的。我有一个需要用户输入的表单，因此我正在尝试使用 VueJS 构建它。该表单全部包含在一个模板文件 (.tpl.php) 中，所有内容都在此模板文件中或通过 VueJS javascript 提供（没有来自 CMS）。
我遇到的问题是 Vue 组件没有在前端呈现，但是当我将代码复制到 JSFiddle 时它们会呈现，所以我猜测这是 VueJS 和 Drupal 之间的交互问题。这是我检查时标记的屏幕截图...
这是来自 .tpl.php 文件的代码...
<div id="app">
<form>
<div>
<label for="year">Per Year</label>
<input type="radio" name="frequency" id="year" value="year" v-model="frequency" checked>
<label for="month">Per Month</label>
<input type="radio" name="frequency" id="month" value="month" v-model="frequency">
</div>
</form>
<ul class="plans">
<template id="plan-component">
<h2 class="plan-name"> name </h2>
<h2 class="plan-cost"> price </h2>
<h2 class="plan-tagline"> tagline </h2>
<a href="#" v-on:click="makeActivePlan($event)" class="select-plan button">Choose this plan</a>
</template>
<li>
<plan-component :frequency="frequency"
name="Basic"
tagline="Basic tagline"
price-yearly="Free"
price-monthly="Free"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Rec"
tagline="Rec tagline"
price-yearly="3"
price-monthly="4"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Team"
tagline="Team tagline"
price-yearly="4"
price-monthly="5"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Club"
tagline="Club tagline"
price-yearly="5"
price-monthly="6"
></plan-component>
</li>
</ul>
</div>
..以及我的 JS 文件中的代码...
Vue.component('plan-component',
template: '#plan-component',
props: ['frequency', 'name', 'tagline', 'priceYearly', 'priceMonthly'],
computed:
'price': function()
if (this.frequency === 'year')
return this.priceYearly;
else
return this.priceMonthly;
,
methods:
makeActivePlan()
// We dispatch an event setting this to become the active plan
this.$dispatch('set-active-plan', this);
);
new Vue(
el: '#app',
data:
frequency: 'year',
activePlan: name: 'no', price: 'You must select a plan!'
,
events:
'set-active-plan': function(plan)
this.activePlan = plan;
,
);
这是正确输出组件的 JSFiddle - https://jsfiddle.net/2xgrpLm6/
【问题讨论】：
控制台有错误吗？ 【参考方案1】：你用的是什么浏览器？ IE 不支持<template> 标签。
另一个想法是确保您从不使用片段组件（这意味着使用 div 将模板中的所有内容包装起来：
<template id="foobar">
<div>
CONTENT HERE
</div>
</template>
最后，你开启了 Vue 调试模式了吗？在你实例化你的 Vue 实例之前，设置 Vue.config.debug = true 然后看看你是否得到控制台错误。
【讨论】：
使用 Vue 调试模式我能够识别问题。我的脚本在页面内容呈现之前触发，因为尚未定义 #app。感谢您的帮助。【参考方案2】：尝试将 <template id="plan-component">...</template> 代码移出 Vue 实例。即，它不包含在<div id="app">...</div> 中。
这在过去为我解决了类似的问题，但我不确定它是否适用于此。
【讨论】：
感谢您的建议，不幸的是它没有任何区别。【参考方案3】：对于遇到类似问题的任何人，解决方案都很简单。在 Jeff 建议打开 Vue 调试模式（并下载 Vue JS 的 Dev 版本而不是缩小版 - https://vuejs.org/guide/installation.html）后，控制台给出了错误 [Vue warn]: Cannot find element: #app。
问题是 Drupal 在 <div id="app"> 加载到 DOM 之前将我的脚本加载到 <head> 中。因此找不到#app。在关闭 <body> 标记之前输出脚本后，所有内容都已排序。请参阅此处了解更多信息[Vue warn]: Cannot find element
【讨论】：
以上是关于VueJS 组件不会在前端呈现（可能是 Drupal 问题）的主要内容，如果未能解决你的问题，请参考以下文章
我在 Vuejs 中的组件没有在我的 Blade 视图中呈现