I have a <p v-for="index in attrLength" :key="index" ></p>. The idea is to take an object, in this case const project = projects[index] put it inside the <p> tag, add a . to it, and add the index number after that from the loop, but with the letter "p" injected in front of it, so you'd end up with project.p1, project.p2 and so on, inside the double curly braces like so: <p v-for="index in attrLength" :key="index" >{{project.p1}}</p>.

How do I do that? I didn't find anything in the docs. Is this even possible?

CodePudding user response：

You can use bracket notation with computed object keys:

<p v-for="index in attrLength" :key="index" >
  {{ project[`p${index}`] }}
</p>

demo

CodePudding user response：

I am assuming attrLength is a number. Hence, as iteration will always start from 1 inside v-for loop. You can access project objects by using projects[index - 1] instead of projects[index].

Live Demo :

new Vue({
  el: '#app',
  data: {
    projects: [{
        p1: 'Paragraph 1'
    }, {
        p2: 'Paragraph 2'
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-for="index in 2" :key="index" >
    {{ projects[index - 1][`p${index}`] }}
  </p>
</div>