Можно ли как то не изменяя оригинальный массив, отфильтровать и вывести его значения?
Можно конечно, вот пример, далее описываю под каждым блоком:
var vue_model = new Vue({
el:'#arr',
data:{
generalArray:[
'Hello','i','am','small','array'
]
},
computed:{
fiveLetterWords: function () {
return this.generalArray.filter( function (val) {
return val.length>=5
})
}
}
})
Первый участок кода с экземпляром vue, который содержит в себе обычное свойство – массив, и вычисляемое свойство, в котором мы с помощью filter перебираем массив, и возвращаем абсолютно другой массив.
<div id="arr">
<p v-for="(el, index) in generalArray">{{index}} - {{el}}
<p v-for="(el, index) in fiveLetterWords">{{index}} - {{el}}
В html создаем директивой v-for два цикла, и выводим элемент и индекс, как видим в конце, наш второй массив, созданный на основе отбора определенных значений из первого немного меньше и соответствует условию.
p {
padding-left:25px;
background-color: black;
color: antiquewhite;
border-radius: 1px;
}
Последний блок это css, для большей наглядности примера.