使用pug-html-loader将数据传递到pug(无法读取undefined的属性)

问题描述

根据 pug-html-loader ，则加载程序接受data对象，该对象作为options的一部分传递给模板.虽然在 pug API参考中的options上不可用，但我已经使用它了发现( grunt-contrib-pug )使用API​​的方式相同.

According to the readme of pug-html-loader, the loader accepts a data object which is being passed as part of the options to the template. While not available on the options within the pug API reference, a grunt plugin I've found (grunt-contrib-pug) uses the API the same way.

我为加载程序指定了以下选项:

I've specified the following options for the loader:

  loader: 'pug-html-loader',
  options: {
    pretty: true,
    exports: false,
    debug: !env.production,
    compileDebug: !env.production,
    cache: config.build.useCaching,
    doctype: 'html',
    data: {
      title:    config.metadata.title,
      baseUrl:  config.build.baseUrl,
      server:   env.server,
      metadata: config.metadata
    }
  }

根据:

title= data.title

但是，我在编译时总是遇到以下错误:

However, I always run into the following error when compiling:

ERROR in   Error: Child compilation failed:
  Module build failed: TypeError: Cannot read property 'title' of undefined

出于调试目的，我在模板中添加了以下行:

For debugging purposes, I've included the following line in the template:

-
  console.log(' DATA! ' + data);

这将导致:

DATA! undefined

我还通过声明一些乱码而不是对象(例如，字符串，纯json，数字..)来确保将数据正确传递给pug，然后pug编译器会抱怨数据不在有效格式等.

I've also ensured that the data is correctly being passed to pug by declaring some gibberish instead of an object (e.g. a string, plain json, a number..), then the pug compiler complains that the data is not in valid format etc.

有人遇到同样的问题吗?

Anyone facing the same issue?

推荐答案

您应直接引用数据(即，不为字段加上data前缀)

You should reference data directy (i.e. without prefixing the fields with data)

因此，您应该像这样更改代码:

So you should change your code like so:

{
  loader: 'pug-html-loader',
  options: {
    data: {
      title: 'Hello World'
    }
  }
}

然后从您的PUG模板中引用它

And then reference it from your PUG template

doctype html
html
  head
    title= hello

这篇关于使用pug-html-loader将数据传递到pug(无法读取undefined的属性)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！