[Vuejs]-Vue iterated data not showing

-1👍

Here’s how it can be made, and here is how it’s easy to display values for debugging purposes (it should be removed after finishing)
(p changed into list for visibility)

<template>
  <div>
    <!-- Frontend -->
    <div>
      <code>skill.frontend={{skill.frontend}}</code>
      <h3>
        Frontend
      </h3>
      <ul>
        <li v-for="fe in skill.frontend">
          {{fe.name}}
          <br> li json={{ fe }}
        </li>
      </ul>
    </div>

    <!-- Backend -->
    <div>
      <code>skill.backend={{skill.backend}}</code>
      <h3>
        Backend
      </h3>
      <ul>
        <li v-for="be in skill.backend">
          {{be.name}}
          <br> li json={{ be }}
        </li>
      </ul>
    </div>
  </div>
</template>

https://play.vuejs.org/#__DEV__eNqtVd9vmzAQ/ldufulLAW3dXhiNtE6aqqnVKq3ay9iDAaM54ZfAsFWI/71nDMYhCQ1qoyicfd/dd/dxdlrypSjspmbEJZ5gaZFQwTZ+Bvjx7inPvuaZwAcrHdz1HAOCyyoseSGgYqIu+iCeFnkpYC8Q4jJPwSe2k5rbktQnn2VSlaZPSS7JAeqgNO/njidJBY0V5+W1Tyq5BJ5Bb1S2evgE3N4aEXJjx57Gpc0jn6zpamDt27mYdaN8stoLbEmHqEomBQbYFoubdz7Qos3+97ERi2mdCGhlvqLMi8pVNgxp9RJGrAtZnSSX4654KpgLP4ItC8Ww2ckH/uDXYJ+rPnVzqH3Em3E+3lkWfCsxiGURWNa4PSFwEeYR2yi9UYUeet22+xtd5zk9Tkf9vdI2aArtdQy3VycG1Eu4noqY6ZHQTD4xwABtGzM7oynrel10lqDcAGbaVnmGxQJmMgGek/CJ39EFeI7q3FDnhoa788QJFFJrM6xfkGbIv1KZwFBm4DkQJjhHGEy0RpjJOn7kzp/9Nx19fShx2I/xD/cFnlkXfqtcmt0nUiXpmVC6CJxBPXc6dC9coeRFJBO8N2LnyX/J23Lm5WGeGd7J2RnAE1wfFrhuH+/vFsiUexXb1QLbd9pQ9ToWOE3QKuaPC8yPlCf/uHw7J3knyCrWTwusN3kuKlHSYoHWwBi8o/nHmDB9fl87YHe0pA3DP8mTRWnEmw3aw+3DAl/vPda+cZ7R7kj3DBVuhpk=

0👍

First, you have the data in the json file organized incorrectly (redid it).

Second, follow upl where you import components and other data from.

Third, your example has a bunch of mistakes in it, so I reworked it for you to look at and maybe have learned something useful for themselves.

Best regards! ✌️

Vue SFC Playground

Leave a comment