title: How do I fix substring not working in vue.js 3?
body: <p>I'm new in vuejs, and I'm trying to fetch posts from a JSON file using the composition API, but I'm having a problem. After fetching post, too many texts are being displayed, which is what I don't want. I have tried to fix it using the following method:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;max-w-md bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-6&quot; v-for=&quot;post in post&quot; :key=&quot;post.id&quot;&gt;
          &lt;div class=&quot;md:flex&quot;&gt;
              &lt;div class=&quot;md:flex-shrink-0&quot; &gt;
              &lt;img class=&quot;h-48 w-full object-cover md:h-full md:w-48&quot; src=&quot;assets/store.jpg&quot; alt=&quot;Man looking at item at a store&quot;&gt;
              &lt;div class=&quot;p-8&quot;&gt;
              &lt;div class=&quot;uppercase tracking-wide text-sm text-indigo-500 font-semibold&quot;&gt;News&lt;/div&gt;
              &lt;router-link :to=&quot;{name: 'Details', params:{id: post.id}}&quot;&gt;&lt;strong&gt;{{post.title}}&lt;/strong&gt;&lt;/router-link&gt;
              &lt;p class=&quot;mt-2 text-gray-500&quot;&gt;{{snippet}}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { computed } from 'vue'
  export default {
      props:['post'],
      setup(props) {
          const snippet = computed(() =&gt; {
              return props.post.body.substring(0,100) + '...'
          }) 
          return{snippet}
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>The problem here is that when I run this piece of code, I get an error that says:</p>
  <blockquote>
  <p>TypeError: Cannot read properties of undefined (reading 'substring')</p>
  </blockquote>
  <p>And I don't even know how to go about this at the moment. Could someone please help?</p>