93937


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

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2023-02-20T06:19:57.823
93919
2023-02-21T05:27:44.520
44556
question
javascript vue.js
Vueのcomputedで２次元配列の算出プロパティを作りたい


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

参考: [Composition API とは?](https://ja.vuejs.org/guide/extras/composition-api-
faq.html#what-is-composition-api)

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2023-02-21T05:27:44.520
93937
2023-02-21T05:27:44.520
43025
93919
answer