Tengo un componente que acepta props
<BarChart header="header name" dataPoint="data_to_look_at" size=35 /> Con el accesorio dataPoint , quiero usar esto en mi componente para poder usarlo (creo, no sé si esta es la solución correcta) en una cadena interpolada como esta para acceder a los elementos en un objeto
// inside of a v-for loop that iterates over an object etc {{ data[index].attributes.${dataPoint} }}No estoy seguro de cómo hacer esto y, por supuesto, lo anterior no funciona.
interpolación de cadenas Vue js
No es relevante para mi pregunta.
No del todo tampoco
¿Cómo se interpola un accesorio en una interpolación?
Observación: Como está iterando su lista de artículos usando v-for loop, no es necesario acceder al artículo por índice. Simplemente puedes hacer esto :
<p v-for="data in items" :key="data.id"> {{ data.attributes[datapoint] }} </p>Demostración en vivo :
Vue.component('child', { data: function() { return { items: [{ id: 1, attributes: { name: 'Alpha' } }, { id: 2, attributes: { name: 'Beta' } }, { id: 3, attributes: { name: 'Gamma' } }] } }, props: ['header', 'datapoint'], template: `<div> <p v-for="data in items" :key="data.id">{{ data.attributes[datapoint] }}</p> </div>` }); var app = new Vue({ el: '#app' }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <child header="Header Name" dataPoint="name"></child> </div>