VueJS 组件不会在前端呈现（可能是 Drupal 问题）答案

【问题标题】：VueJS component won't render on front end (possibly Drupal issue)VueJS 组件不会在前端呈现（可能是 Drupal 问题）
【发布时间】：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/

【问题讨论】：

控制台有错误吗？

标签： drupal vue.js

【解决方案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

【讨论】：