Vue js如何将字符串拆分为数组并在v-for列表渲染器中使用

Question

我想拆分列表的一行并在另一个列表语句中使用结果，如下所示：我实际上知道这种类型的 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('+'))"

原文由 APB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我的解决方案！

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

})

看到它在行动

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 user3841678 发布，翻译遵循 CC BY-SA 4.0 许可协议