0

現在Vue3のコード(Composition API)を練習しています。
次のような配列があった場合算出プロパティで積を求める(あくまで練習)ことを目的としています。computedの書き方がどうしてもわかりません。hogeの所にはitemsのそれぞれの積が返って欲しいです。宜しくお願いします。

<script>
export default {
  data() {
    return {
        items: [ [ 10, 20], [20, 30], [25, 34] ]
    }
    },
  computed:{
    multiply() {   
      return 'hoge';
  },
}
}
</script>

<template>
    <li v-for="item in items">
    {{ item }} - {{ multiply }}
    </li>
</template>
4
  • 質問のコードは Options API であって, Composition API ではないのでは? (ならば) Options API で動作するようにしたいのか, Composition API に置き換えたいのか, を明確にしたほうがよいかも?
    – oriri
    2月20日 8:07
  • コメントありがとうございます。Composition APIとOptions API余りわかっておらず申し訳ありません。配列の要素を計算して新しい配列を作り、それをリアクティブに表示できるかなと思い質問させていただきました。
    – masa
    2月21日 4:33
  • 小さいコードなので両方記したけど, Q&A としては別々のものなので, (本来なら)質問を分けたほうがよいでしょう
    – oriri
    2月21日 5:43
  • 回答ありがとうございました。mapを使うのかなとは思っていましたがそこからコードをかけずにいました。表示のところも大変わかりやすくありがとうございます。
    – masa
    2月21日 12:28

1 件の回答 1

0

Composition API は下記コードの <script setup> の部分
同じ処理を Composition API と Options API で行っています
(変数は異なる)

参考: Composition API とは?

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

const vals = ref([[10, 20], [20, 30], [25, 34]])
const multi = computed(() => {
  return vals.value.map(([x, y]) => x * y)
})
</script>

<script>
export default {
  data() {
    return {
        items: [ [ 10, 20], [20, 30], [25, 34] ]
    }
  },
  computed: {
    multiply() {   
      return this.items.map(([x, y]) => x * y)
    }
  },
}
</script>

<template>
    <li v-for="(item, idx) in items">
    {{ item }} - {{ multiply[idx] }}
     ↔
    {{vals[idx]}} {{ multi[idx] }}
    </li>
</template>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。