Use JSON fixtures and Vue.js for templating with real data?

[agentrickard]

Over in the PNet project, I've taken Carl's styleguide and enhanced it with real data using Vue.js (a single JS include) and some JSON exports of real Drupal data.

That work is in https://github.com/palantirnet/palantirnet-d8/pull/78

Is this something we want to do with our styleguide work? It would entail:

• Creating JSON fixtures for each data model in the project.
• Learning Vue.js syntax for looping and variable syntax.
• Understanding how to use {% verbatim %} in Twig templates so that Vue.js handlebar tags are not interpreted.

Here's a snippet of the final code, which iterates over content for populating a list:

    <div class="grid">
      <div class="grid-sizer"></div>
      <div class="gutter-sizer"></div>
      <!-- Vue.js template for printing each item. -->
      <template v-for="(item, index) in selectedContent(content, display, topicSelected, industrySelected)">
        <div :class="'grid-item' + getClass(index)">
          <a class="grid-link" :v-bind="{ href: item.url }" :style="{ backgroundImage: 'url(\'' + background(index, item.image) + '\')' }">
          <div class="grid-link__content">
            <span class="grid-link__label">{% verbatim %}{{ item.type }}{% endverbatim %}</span>
            <h2 class="grid-link__title">{% verbatim %}{{ item.title | decode }}{% endverbatim %}</h2>
          </div>
          <div class="grid-link__view">
            <span class="grid-link__label">{% verbatim %}{{ item.title | decode }}{% endverbatim %}</span>
            <span class="grid-link__view-text" :style="{ color: getColor(index) }">View {% verbatim %}{{ item.type }}{% endverbatim %}</span>
          </div>
          </a>
        </div>
      </template>
    </div>