Vue js How to split string to array and use in v-for list renderer
30,672
Solution 1
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
}
}
})
Solution 2
v-for="code in row.codes.split('+')"
Author by
APB
Updated on August 26, 2021Comments
-
APB almost 3 years
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('+'))"
-
APB about 6 yearsyes, this a true solution but little complicated :)
-
Roland about 6 yearswhy complicated?it is very clear and simple in my opinion
-
SherylHohman about 3 yearsCode only answers are discouraged. consider editing to add explanation. Quality answers accrue the most upvotes over time as future visitors learn something to apply to their own code bases.