Hacker News Reader

Comment by iakov | Hacker News Reader

How do you get the data into your Vue code?

You don't have to refactor much I think. You can inject the data into global scope in your PHP template, before you include React script. I'd do something like `window.__PAGE_DATA__ = "<?php echo json_encode($data) ?>";`.

Then, in your React code you'll be able to access it in a pretty idiomatic way for React. Instead of calling `fetch` or something similar, you'll have to call `JSON.parse(window.__PAGE_DATA__)`. You have to use `try`/`catch` block around it as well to handle errors from JSON parsing - just like you have to have the same block around `await` calls. You can treat the data as immutable to a degree as well - accidental local property updates will not get to the global scope, you'll have to set the property in `window` object.

I've used React in a few projects, embedding it into a Wordpress website using this approach. Seems to work well for me, but YMMV.

View on HN

In vue, you don't even touch the data, you just sprinkle an attribute on the existing html to augment functionality much like you'd do unobtrusive js w/ jquery.

The approach you mentioned sort of works but a) it does require refactoring backend code (which by itself may already be a non-starter depending on whether you're dealing w/ a "old guard" backend tech lead, for example) b) it opens up potential security holes if implemented as you describe, c) you might lose SEO visibility and/or fail more catastrophically (i.e. a js exception might blank out the page entirely, vs merely breaking toggling), etc.

A more nitpicky code reviewer might also question the usage of babel off of a CDN if you went with a no-build JSX approach, the usage of window, etc.

By comparison, the vue snippet would be trivial, "production worthy" and it handles all the things above correctly.

> In vue, you don't even touch the data, you just sprinkle an attribute on the existing html to augment functionality much like you'd do unobtrusive js w/ jquery.

I don't have a lot of experience with Vue, but I don't follow. You include Vue.js from CDN in a `script` tag, and then just add the `v-for` and `v-if` annotations to your HTML? How does Vue get the data, to properly iterate over it in `v-for` or check in `v-if`?

I'm really curious because I feel I'm missing some piece of puzzle here.

You pass data into it as json. Or load it from external source as json

I think the idea is that the backend already iterates over the data and spits out for example a ul with a li per faq item. You edit the template the backend uses so that the vue annotations are also produced, which in theory is easier than changing the backend code.

EDIT:

Previous HTML outputted by for loop in backend template:

  <ul>
    <li>
      <h2>Question 1</h2>
      <p>Answer 1</p>
    </li>
    <li>
      <h2>Question 2</h2>
      <p>Answer 2</p>
    </li>
  </ul>

New HTML outputted by for loop in backend template

  <ul>
    <li>
      <h2>
        <button v-on:click="expanded = 1">
          Question 1
        </button>
      </h2>
      <p v-if="expanded === 1">Answer 1</p>
    </li>
    <li>
      <h2>
        <button v-on:click="expanded = 2">
          Question 2
        </button>
      </h2>
      <p v-if="expanded === 2">Answer 2</p>
    </li>
  </ul>

Reply on news.ycombinator.com