JavaScript mapメソッドの出力結果（文字列）を v-for で表示させたい

Question

前提・実現したいこと

JavaScriptのmapメソッドの出力配列を、vue.js の v-for での扱いについて質問させてください。
以下のようなオブジェクトがあり、その中から指定された kind の name だけを v-for で表示させたいとします。例えば、fruitsが指定されたら、
Apple Orange Peach
と表示されるイメージです。

      foods: [
        { kind: 'vegetable', name: ['Tomato', 'Cabbage', 'Onion'] },
        { kind: 'fruits', name: ['Apple', 'Orange', 'Peach'] }
      ]

発生している問題・エラーメッセージ

以下のように書くと、[ "Apple", "Orange", "Peach" ] と、配列の中身がそのまま、大括弧やダブルクォーテーションも一緒になって表示されます。中身だけの表示にはどうすればなりますか？

また補足的な質問になりますが、このような場合、v-forのkeyは何を指定したら良いですか？やはりmapにreduceも加えて、idを別途、振った方が良いのでしょうか？

  <div class="foods" v-for="value in Array.from(whatfood(foods, 'fruits'))" :key="value">{{value}}</div>

    whatfood (val, targetKind) {
      const foods = val
        .map((item) => {
          if (item.kind === targetKind) {
            return item.name
          }
        })
      return foods
    }

試したこと

reduceで配列を作り直してみましたが、結果は同じでした。

    whatfood (val, targetKind) {
      const foods = val
        .map((item) => {
          if (item.kind === targetKind) {
            return item.name
          }
        })
        .reduce((array, item) => {
          array.push(item)
          return (array)
        }, [])
      return foods
    }

補足情報（FW/ツールのバージョンなど）

vue: 2.6.11
vue-cli: 4.4.6

Answer 1

v-forではなくmapの使い方の問題です。

return foodsの前にconsole.logでfoodsの中身を見てください。
[ undefined, [ 'Apple', 'Orange', 'Peach' ] ]のようになっていると思います。

どっちかというとfilterのほうがいいと思いますがその場合戻ってくる値は
[ { kind: 'fruits', name: [ 'Apple', 'Orange', 'Peach' ] } ]
になるのでそこからnameの値だけreturn する必要があります。

Comments

[jogawa]

gogoweb_ikeda 様
ありがとうございます。以下のようにしたらうまく行きました。
これは例なので、retVal[0]のような強引なことをしていますが、本来ならfruitsがフィルターに複数ヒットしたときの処理をちゃんと書くべきですね。

whatfood (val, targetKind) {
const retVal = val.filter(item => {
return item.kind === targetKind
})
return retVal[0].name
}