CODEWITHSUNDEEP
arraysvue.jssplit
Sue A.
Sue A.

Reputation: 39

How to get only the first sentence splitted by | to display in vuejs

In my assets table have an image column that stores image name. It will stores multiple image and splitted by |

in my vue.js table i managed to display it as in the screenshot screenshot

here is my codes

<tbody v-if="assets.data && assets.data.length > 0">
  <tr v-for="asset,id in assets.data">
          <td class="text-center">{{ assets.first_item + id }}</td>
          <td class="text-center">{{asset.image}}</td>
 </tr>

How can i get only the first sentence? I just want to display only the first image name.

Upvotes: 0

Views: 557

Answers (1)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27222

You can use string split() method to split the string based on '|' which will give you the array of splitted elements and then you can access the first element.

Working Demo :

var app  = new Vue({
  el: "#app",
  data: {
    assets: {
        data: [{
        id: 1,
        image: 'image1.png|image2.png|image3.png'
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table class="table">
    <tbody v-if="assets?.data?.length > 0">
      <tr v-for="(asset, index) in assets.data" :key="index">
        <td class="text-center">{{asset.image.split('|')[0]}}</td>
      </tr>
    </tbody>
  </table>
</div>

Hope it will work as per the requirement.

Upvotes: 1

Related Questions