javascript 代码中不断出现未定义的错误

ryevplcw 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(147)

它以前工作过，现在不工作了，我不知道为什么，我试过移动东西，给它分配不同的数字，我总是得到同样的错误。如果有人能让我知道在哪里添加一行，那就太好了。我只是不知道问题在哪里，因为我在方法中提到了它，并在按钮单击时得到值。

const {
  createApp
} = Vue
createApp({
  data() {
    return {
      mins: 0,
      cats: 0,
      xp: 0,

      buttons: [{
        name: "Gym",
        increaseValue: 10

      }, {
        name: "Sleep",
        increaseValue: 2
      }, {
        name: "Eat",
        increaseValue: 3
      }]
    }
  },
  methods: {
    increaseXp(increaseValue) {
      this.xp += increaseValue
    }
  }
}).mount('#app')

<head>
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://cdn.tailwindcss.com/"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Name</title>
</head>

<body class="bg-sky-100">
  <div id="app">
    <div class="max-w-3xl mx-auto">
      <h1 class="font-bold text-7xl border-b-4 pb-4 border-black w-fit text-center font-mono">Name of App</h1>
      <h2 class="font-bold text-2xl text-center mt-5">
        LEVEL
      </h2>
      <h3 class="text-center">
        {{xp}}
      </h3>
    </div>
    <div class="grid grid-cols-3 gap-3 px-3 mt-6">
      <button onClick="increaseXp(button.increaseValue)" v-for="button in buttons" class="py-2 border border-black rounded bg-sky-300">
                {{button.name}}
            </button>
    </div>

  </div>
</body>

JavaScript

来源：https://stackoverflow.com/questions/75751930/i-keep-getting-a-not-defined-error-in-my-code

1条答案

按热度按时间

smtd7mpg1#

使用Vue的@click，而不是常规的HTML属性onClick。

const { createApp } = Vue
createApp({
    data() {
        return {
            mins: 0,
            cats: 0,
            xp: 0,
            buttons:[{
                name: "Gym", 
                increaseValue: 10
            },{
                name: "Sleep", 
                increaseValue: 2
            }, {
                name: "Eat",
                increaseValue: 3
            }]
        }
    },
    methods: {
        increaseXp(increaseValue){
            this.xp += increaseValue
        }
    }
}).mount('#app')

<head>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.tailwindcss.com/"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Name</title>
</head>
<body class="bg-sky-100">
    <div id="app">
       <div class="max-w-3xl mx-auto">
        <h1 class="font-bold text-7xl border-b-4 pb-4 border-black w-fit text-center font-mono" >Name of App</h1>
        <h2 class="font-bold text-2xl text-center mt-5">
            LEVEL
        </h2>
        <h3 class="text-center">
            {{xp}}
        </h3>
        </div>
        <div class="grid grid-cols-3 gap-3 px-3 mt-6" >
            <button @click="increaseXp(button.increaseValue)" v-for="button in buttons" class="py-2 border border-black rounded bg-sky-300">
                {{button.name}}
            </button>
        </div>
    </div>
</body>

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 代码中不断出现未定义的错误

1条答案

相关问题

热门标签

最新问答