javascript Vue js 如何将字符串拆分为数组并在 v-for 列表渲染器中使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49895936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue js How to split string to array and use in v-for list renderer
提问by APB
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!
我想拆分列表中的一行并在另一个列表语句中使用结果，如下所示：我实际上知道这种类型的 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>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('+'))"
回答by roli roli
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
}
}
})
