I want to split a row of a list and use the result in another list statement like this : I actually know that the syntax of Vue list renderer of this type is incorrect but I want to show you what I need!

var app = new Vue({
	el : "#app",
  data : {
    list : [
      {
        'name' : 'aaa',
        'codes' : '111+222+333'
      },
      {
        'name' : 'bbb',
        'codes' : '432+456+678'
      }
    ]
  }
})

<div id="app">
  <div v-for="row in list">
    <p>{{ row.name }}</p>
    <div v-for="code in (row.codes.split('+'))">
      <p>{{ code }}</p>
    <div>
  </div>
</div>

I want to split a row of a list and use the result in another list statement like this : I actually know that the syntax of Vue list renderer of this type is incorrect but I want to show you what I need!

var app = new Vue({
	el : "#app",
  data : {
    list : [
      {
        'name' : 'aaa',
        'codes' : '111+222+333'
      },
      {
        'name' : 'bbb',
        'codes' : '432+456+678'
      }
    ]
  }
})

<div id="app">
  <div v-for="row in list">
    <p>{{ row.name }}</p>
    <div v-for="code in (row.codes.split('+'))">
      <p>{{ code }}</p>
    <div>
  </div>
</div>

Update: The above code is correct and I had some problems when using filters like this that is wrong :

v-for="code in (row.codes | split('+'))"

• javascript
• list
• vue.js
• split
• vuejs2

• 3 Your code will work as long as you (1) load VueJS library, (2) fix unclosed <p> and <div> elements, and (3) add the missing }) at the end of your code. jsfiddle.net/teddyrised/k1L7p9hm – Terry Commented Apr 18, 2018 at 9:25
• wow! this is unbelievable but I didn't try this syntax. I actually used filters in for that was incorrect! thanks, Terry :) – APB Commented Apr 18, 2018 at 9:33

3 Answers 3

Here is my solution!

<div id="app">
  <div v-for="row in splitedList">
    <p>{{ row.name }}</p>
    <div v-for="code in row.codes">
      <p>{{ code }}</p>
      </div>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    list : [
      {
        'name' : 'aaa',
        'codes' : '111+222+333'
      },
      {
        'name' : 'bbb',
        'codes' : '432+456+678'
      }
    ]
  },
  computed: {
    splitedList(){
        let newArr = [...this.list]
      newArr.map(el => {
        return el.codes = el.codes.split('+')
      })
      return newArr
    }
  }

})

See it in action

v-for="code in row.codes.split('+')"

I use in function in method...

<div id="app">
  <div v-for="row in list">
    <p>{{ row.name }}</p>
    <div v-for="code in splitedList(row.codes)">
      <p>{{ code }}</p>
      </div>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    list : [
      {
        'name' : 'aaa',
        'codes' : '111+222+333'
      },
      {
        'name' : 'bbb',
        'codes' : '432+456+678'
      }
    ]
  },
  computed: {
  },
methods: {  
    splitedList(row){               
              return (row !== null)?row.split('+'):'';
        }
    }

})