【Vue】APIレスポンスをv-forさせているうち、商品名（文字列）が長いので切り出したい

Question

前提・実現したいこと

Vueで楽天APIを叩いて、検索結果を表示するようにしたいのですが、商品名が長すぎるため、文字列の切り出しをしたいです。

item.Item.itemPriceはこちらの書き方で出力できることは確認済みです。

追加修正等、わかる方がいらっしゃいましたら、アドバイスをいただけないでしょうか。
よろしくお願いいたします。

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

Error in data(): "ReferenceError: item is not defined"
Error in render: "TypeError: Cannot read property 'length' of undefined"

該当のソースコード

RakutenApiResultItem.vue

<template>
  <div>
    <div class="card">
      <a target="_blank" :href="item.Item.itemUrl">
        <div class="content">
          <p>{{ sliceItemName() }}</p>
          <p>{{ item.Item.itemPrice }}円</p>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "RakutenApiResultItem",
  props: {
    item: Object,
    required: true,
  },
  data() {
    return {
      itemName: item.Item.itemName,
    };
  },
  computed: {
    sliceItemName() {
      if (this.itemName.length > 27) {
        return this.itemName.slice(0, 27) + "...";
      } else {
        return this.itemName;
      }
    },
  },
};
</script>
<style scope></style>

RakutenApiResultList.vue

<template>
  <div>
    <div class="columns is-multiline">
      <template v-for="item in items">
        <div class="column is-3">
          <RakutenApiResultItem :key="item.id" :item="item" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import RakutenApiResultItem from "./RakutenApiResultItem";
import { mapGetters } from "vuex";
export default {
  name: "RakutenApiResultList",
  components: {
    RakutenApiResultItem,
  },
  computed: {
    ...mapGetters(["items", "currentPage", "pageCount", "reviewCount", "reviewAverage"]),
  },
};
</script>

<style scope></style>

試したこと

Vueの公式を確認すると、下記のようにすれば良いと載っていましたが、List(親)、Item(子)でコンポーネントを分けていますし、この書き方だとitemName以外のitemPriceまで切り出してしまうので、上手くいきません。

// html
<p v-for="item in filteredItems">{{ item }}</p>

// js
computed: {
  filteredItems: function () {
    return this.items.slice(0, 10)
  }
}

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

Vue　2.6.12

Answer 1

処理中itemのitemNameを関数に引き渡して変換できないでしょうか。

<template>
  <div>
    <div class="card">
      <a target="_blank" :href="item.Item.itemUrl">
        <div class="content">
          <p>{{ sliceItemName(item.Item.itemName) }}</p>
          <p>{{ item.Item.itemPrice }}円</p>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "RakutenApiResultItem",
  props: {
    item: Object,
    required: true,
  },
  data() {
    return {
      itemName: item.Item.itemName,
    };
  },
  computed: {
    sliceItemName(itemName) {
      if (itemName.length > 27) {
        return itemName.slice(0, 27) + "...";
      } else {
        return itemName;
      }
    },
  },
};
</script>

Comments

[nomu_lui]

いただいたコードのとおりやってみると、下記のようなエラーが出てしまいました。
`Error in data(): "ReferenceError: item is not defined"`
`ReferenceError: item is not defined`
`Error in render: "TypeError: _vm.sliceItemName is not a function"`
`TypeError: _vm.sliceItemName is not a function`

[nomu_lui]

うっかりミスでした！
教えていただいたコードに変更して、computedではなく、methodにしたらできました！
ありがとうございました。
メソッドの引数の扱い方がまだ理解しきっていないことが分かったので、もっと学習いたします

[plasticgrammer]

> computedではなく、methodにしたらできました！
確かにそうですね。考慮が足りず失礼しました。
できたとのことでよかったです。

[nomu_lui]

早々にアドバイスを頂けまして非常に助かりました。
ありがとうございます。