Question

我目前正在处理的网站是在Drupal 7中构建的。我有一个需要用户输入的表单，因此我尝试使用VueJS构建它。表单包含在一个模板文件（.tpl.php）中，所有内容都在此模板文件中提供，或者通过VueJS Javascript提供（没有任何内容来自CMS）。

我遇到的问题是Vue组件没有在前端渲染，但是当我将代码复制到JSFiddle中时，我猜测它是VueJS与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/

Answer 1

尝试将<template id="plan-component">...</template>代码移到Vue实例之外。即，它不包含在<div id="app">...</div>中。

这在过去已经为我解决了类似的问题，但我不确定它是否适用于此。

Answer 2

您使用的浏览器是什么？ IE中不支持<template>标记。

另一个想法是确保你永远不会使用片段组件（意味着用你喜欢的div包装模板中的所有内容：

<template id="foobar">
  <div>
    CONTENT HERE
  </div>
</template>

最后，你打开了Vue调试模式吗？在实例化Vue实例之前，请设置Vue.config.debug = true并查看是否出现控制台错误。

Answer 3

对于任何有类似问题的人来说，解决方案很简单。在Jeff建议启用Vue调试模式（并下载Vue JS的Dev版本而不是缩小版本 - https://vuejs.org/guide/installation.html）后，控制台发出了错误<head>。

问题在于，在<div id="app">加载到DOM之前，Drupal正在#app加载我的脚本。因此无法找到<body>。在结束$('.myCssClass').on('change', function() { alert("This is executed"); $(this).parent().submit(function(e) { alert("This is NOT executed"); $.ajax({ type: "POST", url: "script.php", data: $(this).parent().serialize(), success: function(data) { alert(data); } }); e.preventDefault(); });标记之前输出脚本后，所有标记都已排序。有关详细信息，请参阅此处[Vue warn]: Cannot find element

VueJS组件不会在前端渲染（可能是Drupal问题）

3 个答案: