Как использовать данные JS в шаблоне?

Question

Я пытаюсь освоить некоторые полезные навыки при создании своего веб-сайта резюме, поэтому я решил попробовать Vue.js. У меня не было проблем с пониманием базовой структуры фреймворка, но у меня были проблемы с манипулированием данными в файлах .Vue. Сейчас я пытаюсь создать в теге два класса:

• Навыки
• Категории (список навыков с именем)

<script>
    class Category {
        name = "";
        skills = [];
        constructor(name) {
            this.name = name;
            this.skills = [];
        }
    }

    class Skill {
        constructor(name, level) {
            this.name = name;
            this.level = level;
        }
    }

    let programmation = new Category("Programmation");
    let cpp = new Skill("C++", "Confirmed");
    programmation.skills.push(cpp);
    let categories = [].push(programmation, ...);

Затем я создаю список категорий с навыками в них (для ясности я показал только одну в примере кода) и пытаюсь отобразить их в своем шаблоне следующим образом:

<template>
    <div class="skills">
        <h1 v-for="cat in categories" v-bind:key="cat.name">{{cat.name}}</h1>
        <container xl="1200"></container>
    </div>
</template>

ПокаЯ только пытаюсь отобразить имена своих категорий.

Однако компилятор показывает мне эту ошибку:

error: 'categories' is assigned a value but never used (no-unused-vars) at src\views\Skills.vue:72:5:
  71 |
> 72 | let categories = [].push(programmation, ...);
     |     ^
  73 |
  74 | export default {
  75 |   name: "skills",

, когда я использую это значение в шаблоне. Как мне определить и использовать переменные Js в моем шаблоне?

Answer 1

Вы используете категории в качестве реактивного свойства внутри компонента vue, но вам нужно зарегистрироваться, чтобы сделать его реактивным

Вот исправление в экспорте:

export default {
  name: "skills",
  data() {
     return {
       categories: categories,
     };
  },
  components: {
    //Skill
  }
};

Вот пример кода: https://codepen.io/chansv/pen/YzzGOMz?editors=1010