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

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

here is my codes

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

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

CodePudding user response：

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 >
    <tbody v-if="assets?.data?.length > 0">
      <tr v-for="(asset, index) in assets.data" :key="index">
        <td >{{asset.image.split('|')[0]}}</td>
      </tr>
    </tbody>
  </table>
</div>

Hope it will work as per the requirement.