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

如何在模板中使用js数据？

1 个答案: