【Vue.js】配列を返すcomputedの配列がエラーになる

Question

実現したいこと

配列を返すcomputedを配列にしたいです。

発生している問題・分からないこと

ソースコードのvalue2のように値を返すcomputedの配列は問題ありません。
list1のように配列を返すcomputedも問題ありません。
しかしlist2のように配列を返すcomputedを配列にすると期待通りに動作しません。

エラーメッセージ

main.js:12 [Vue warn]: Unhandled error during execution of render function 
  at <Test onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[Vue warn]: Unhandled error during execution of component update 
  at <RouterView> 
  at <App>

chunk-U3LI7FBV.js?v=d72bdfcc:270 Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'ReactiveEffect'
    |     property 'deps' -> object with constructor 'Link'
    --- property 'sub' closes the circle
    at JSON.stringify (<anonymous>)
    at toDisplayString (chunk-U3LI7FBV.js?v=d72bdfcc:270:196)
    at Test.vue:24:47
    at renderList (chunk-U3LI7FBV.js?v=d72bdfcc:5014:18)
    at Proxy._sfc_render (Test.vue:1:1)

該当のソースコード

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

const data = reactive({
    value: 0,
    list: [0],
})
const value1 = computed(() => data.value)
const value2 = [computed(() => data.value)]
const list1 = computed(() => data.list)
const list2 = [computed(() => data.list)]
</script>

<template>
    <button @click="data.value++; data.list[0]++">Click</button><br />
    {{ value1 }}<br />
    {{ value2[0] }}<br />
    {{ list1[0] }}<br />
    {{ list2[0][0] }}<br /><!-- エラーにはならないが表示されない -->
    <ul>
        <li v-for="v in list1">{{ v }}</li>
    </ul>
    <ul>
        <li v-for="v in list2[0]">{{ v }}</li><!-- エラーになる -->
    </ul>
</template>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

teratailで「Vue.js computed 配列」で検索しましたが同様の問題が見つかりませんでした。

補足

windows 11 pro 23H2
docker 27.3.1
docker desktop 4.36.0
node 23.11
vue 3.5.13

Comments

[FKM]

11行目のconst list2 = [computed(() => data.list)]をコメントアウトして出力変数を一旦消しても、まだ警告が出ますか？

[fiveways]

11行目、19行目、24行目をコメントアウトすると警告は表示されません。
11行目と19行目についてはコメントアウトしなくても警告は表示されません。

Answer 1

算出プロパティの役割を取り違えていなければ、list2のようなやり方で、オブジェクト代入ができないことがわかるはずです。

算出プロパティって結局何なのかと問われると、テンプレート上で何らかの処理が必要な変数の処理部分を、そこに隔離して置いているだけです。つまりイコールの関係が成り立ちます。

なのでvalue1はdata.valueと結びついていますし、プリミティブな値の０です。
value2も、その0を[0]とオブジェクトでラッピングしているだけなので問題ありません。
list1もdata.listの値と結びついており、その引数は[0]なので問題ありません。

一方、問題のlist2は[[0]]となった状態です。通常では、この方法だと[]に'[0]'という文字列が代入された状態になります。つまり現状、**list[0] の中身は '[0]' ということです。

証拠に{{ list2[0] }}としてみて、開発ツールで値を確認してみてください。おそらく文字列として[0]が表示されるはずです。

解決策

テンプレート上の[0]は文字列じゃなくて、値であることをJavaScriptに認識させてあげないといけません。その結果、以下のような記述になります。valueを付与し文字列から値を取得する方法、またはJavaScript的に['0']という連想配列が付与していると認識させて値を取得する方法、いずれも使用できるみたいです。

ちなみにv-forはプリミティブな値でもオブジェクトのいずれでもループ処理可能なので、マスタッシュ内に単純に出力する場合より、柔軟に変数が使えます。

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

const data = reactive({
    value: 0,
    list: [1], //テストのために値を変更 
})
const value1 = computed(() => data.value)
const value2 = [computed(() => data.value)]
const list1 = computed(() => data.list)
const list2 = [computed(() => data.list)]
</script>

<template>
    <button @click="data.value++; data.list[0]++">Click</button><br />
    {{ value1 }}<br />
    {{ value2[0] }}<br />
    {{ list1[0] }}<br />
    {{ list2[0].value[0] }}<br />
    <ul>
        <li v-for="v in list1">{{ v }}</li>
    </ul>
    <ul>
        <li v-for="v in list2[0]['0']">{{ v }}</li><!-- -->
    </ul>
</template>

Comments

[fiveways]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。