[Vue warn]: Property or method is not defined on the instance

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  // Bad: dataに定義していない
  // Good
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<template>
  <p>{{ count }}</p>
  <button @click="increment">+</button>
</template>

<script setup>
import { ref } from 'vue'

// script setupでは自動的にexpose
const count = ref(0)
const increment = () => count.value++
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!-- setup()関数を使う場合 -->
<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // Bad: returnしていない
    // Good: 必ずreturn
    return {
      count
    }
  }
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<template>
  <p>{{ title }}</p>
</template>

<script setup>
// propsを定義
defineProps({
  title: String
})
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <p>{{ fullName }}</p>
</template>

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// computedで定義
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <button @click="handleClick">Click</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<template>
  <!-- Bad: itemはv-forのスコープ外 -->
  <p>{{ item }}</p>

  <!-- Good: v-for内で使用 -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<template>
  <!-- Bad: userが未定義の可能性 -->
  <p>{{ user.name }}</p>

  <!-- Good: 存在確認 -->
  <p v-if="user">{{ user.name }}</p>

  <!-- Good: Optional chaining -->
  <p>{{ user?.name }}</p>
</template>