Vue js 어레이로 문자열을 분할하고 목록 렌더러에서 사용하는 방법

Vue js 어레이로 문자열을 분할하고 목록 렌더러에서 사용하는 방법

리스트의 행을 나누어 이와 같은 다른 리스트 문장에 그 결과를 사용하고 싶다. 나는 사실 이 타입의 Vue 리스트 렌더러의 구문이 틀리다는 것을 알고 있지만, 나는 당신에게 내가 필요한 것을 보여주고 싶다!

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>

업데이트: 위의 코드가 올바르고 이와 같은 필터를 사용할 때 문제가 발생했는데 잘못된 경우:

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

여기 내 해결책이 있다!

<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
    }
  }

})

실제로 보기

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

나는 기능적으로 방법을 사용한다...

<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('+'):'';
        }
    }

})

참조URL: https://stackoverflow.com/questions/49895936/vue-js-how-to-split-string-to-array-and-use-in-v-for-list-renderer