Vue 3 komposisi api - harta yang dikira mengembalikan tidak ditentukan

Question

Menggunakan API komposisi Vue 3, cara mengembalikan sifat firstDigit 的计算值？计算属性中的关键字 this 是 undefined 但是当我将 this 排除在外时，我收到错误 fourDigits is not Defined.

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

const input = reactive({
    fourDigits: Array(1,2,3,4),
    firstDigit: computed(() => {
      return this.fourDigits[0] <===== `this` is undefined but if I leave `this` out, then `fourDigits` is undefined.
    })
</script>

<template>
   <div>
     <pre>
       {{JSON.stringify(input.firstDigit, null, 2)}}
     </pre>
   </div>
</template>

Answer 1

Jika saya perlu menggunakan harta negeri untuk menetapkan nilai kepada harta negeri yang lain, saya boleh melakukan ini dalam cangkuk onMounted(). Seperti ini:

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

const input = reactive({
    fourDigits: Array(1, 2, 3, 4),
    firstDigit: computed(() => {
        return 0; // just some default value
    })
});

onMounted(() => {
    input.firstDigit = input.fourDigits[0];
})
</script>

<template>
   <div>
     <pre>
       {{ JSON.stringify(input.firstDigit, null, 2) }}
     </pre>
   </div>
</template>

Periksa sama ada ia berfungsi untuk anda. doakan yang terbaik!

Answer 2

this ialah sesuatu yang lain dalam API gubahan, cuba gunakan:

firstDigit: computed(() => {
  return input.fourDigits[0] 
})