Computed data property returning empty - am I doing something wrong?

[philwolstenholme]

Hi all,

I'm trying to set a piece of data in a computed data that relies on page being available (my first time using computed data!), and then I want to print it in a template file. Is this an okay use case? I'm having trouble getting it to work, so I'm not sure what I'm missing.

In src/data/eleventyComputed.js I have this:

module.exports = {
  eleventyComputed: {
    noCssUrl: data => {
      if (data.page.filePathStem == '/index') {
        return `${data.page.filePathStem}.no-css.html`;
      } else {
        return `${data.page.filePathStem}/index.no-css.html`;
      }

      return "Hmmm I'm not sure this is working";
    },
    noJsUrl: data => {
      if (data.page.filePathStem == '/index') {
        return `${data.page.filePathStem}.no-js.html`;
      } else {
        return `${data.page.filePathStem}/index.no-js.html`;
      }

      return "Hmmm I'm not sure this is working";
    },
  },
};

and in src/includes/footer.njk I am doing this:

<li>
  <a href="{{ noCssUrl }}" rel="nofollow" class="underline">View page without CSS</a>
</li>
<li>
  <a href="{{ noJsUrl }}" rel="nofollow" class="underline">View page without JavaScript</a>
</li>

I would expect something to be output, but the output is always:

<li>
  <a href="" class="underline" rel="nofollow">View page without CSS</a>
</li>
<li>
  <a href="" class="underline" rel="nofollow">View page without JavaScript</a>
</li>

Edit: I am using version 0.11.1, the Vue plugin (0.2.1), and I can see the computed data is being calculated if I turn on the DEBUG option:

[eleventy_no_js ] 2021-02-04T23:51:26.871Z Eleventy:Template First round of computed data for './src/index.vue'
[eleventy_no_js ] 2021-02-04T23:51:26.874Z Eleventy:ComputedData 'page.url' accesses [] variables
[eleventy_no_js ] 2021-02-04T23:51:26.874Z Eleventy:ComputedData 'page.outputPath' accesses [] variables
[eleventy_no_js ] 2021-02-04T23:51:26.886Z Eleventy:ComputedData 'eleventyComputed.noCssUrl' accesses [ 'page.filePathStem' ] variables
[eleventy_no_js ] 2021-02-04T23:51:26.887Z Eleventy:ComputedData 'eleventyComputed.noJsUrl' accesses [ 'page.filePathStem' ] variables
[eleventy_no_js ] 2021-02-04T23:51:26.888Z Eleventy:ComputedData Computed data order of execution: [ 'permalink', 'page.url', 'page.outputPath', 'eleventyComputed.noCssUrl', 'eleventyComputed.noJsUrl' ]

[pdehaan]

@philwolstenholme Maybe this?

module.exports = {
  noCssUrl: (data) => {
    if (data.page.filePathStem === "/index") {
      return `${data.page.filePathStem}.no-css.html`;
    }
    return `${data.page.filePathStem}/index.no-css.html`;
  },
  noJsUrl: (data) => {
    if (data.page.filePathStem === "/index") {
      return `${data.page.filePathStem}.no-js.html`;
    }
    return `${data.page.filePathStem}/index.no-js.html`;
  },
};

I noticed in https://www.11ty.dev/docs/data-computed/#real-world-example that they mention an "eleventyComputed.js global data file", but they don't include the nested eleventyComputed property in that example (you can search for "eleventyComputed.js" to jump to the specific example).

[philwolstenholme]

Ah yes, that was it! Thanks @pdehaan !