Digamos que tengo una serie de objetos como los siguientes en mi estado vue:
[ {name: "Daniel", default: false}, {name: "Ross", default: true}, {name: "Rachel", default: false}, {name: "Joey", default: false} {name: "Monica", default: true} {name: "Gunther", default: true} ]En mi página web, todos estos nombres ya se muestran en una lista. Lo que quiero mostrar en mi página web es como a continuación:
Del ejemplo anterior, creo que está bastante claro lo que quiero lograr. ¿Cuál es la forma más sencilla de lograr esto en vue?
Intente usar la propiedad computed . Verifique el fragmento de código a continuación
var app = new Vue({ el: '#app', data() { return { list: [ {name: "Daniel", default: false}, {name: "Ross", default: true}, {name: "Rachel", default: false}, {name: "Joey", default: false}, {name: "Monica", default: true}, {name: "Gunther", default: true}, ] }; }, computed: { getList() { let index = 1; return this.list.map(item => { return item.default ? `${item.name} - Default ${index++}` : `${item.name}`; }); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <template> <ul> <li v-for="(item, index) in getList" :key="index"> {{item}} </li> </ul> </template> </div>Puedes probar esto:
let defaultCount = 0; const data = [ { name: "Daniel", default: false }, { name: "Ross", default: true }, { name: "Rachel", default: false }, { name: "Joey", default: false }, { name: "Monica", default: true }, { name: "Gunther", default: true }, ].map((el) => { if (el.default) { defaultCount++; return { ...el, defCount: defaultCount, }; } else { return { ...el, defCount: null, }; } }); console.log(data); <li v-for="(item) in array" :key="item.name"> {{`${item.name}${item.defCount? ` - Default ${item.defCount}`:''}`}} </li>Puede usar Array.map para iterar sobre todos los elementos de la matriz y generar el resultado deseado
const data = [ { name: "Daniel" , default: false }, { name: "Ross" , default: true }, { name: "Rachel" , default: false }, { name: "Joey" , default: false }, { name: "Monica" , default: true }, { name: "Gunther", default: true } ]; let defaultCount = 0; const res = data.map(item => `${item.name}${item.default? ` default ${++defaultCount}`:''}`) console.log(res)