title: TypeError: Cannot set property of undefined
body: <p>need some support.</p>
  <p>I want to show data by click a button or link</p>
  <pre><code>&lt;div v-for=&quot;hpTheme in hpThemes&quot; :key=&quot;hpTheme.id&quot;&gt;
        &lt;button class=&quot;button round success&quot; @click=&quot;showDetails(hpTheme.id)&quot;&gt;{{hpTheme.hpTitle 
  }}&lt;/button&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  export default {
   data() {
    return {
     hpTheme: { hpTitle: '', hpContent: '' },
  
    hpThemes: [
      {
        id: 1,
        hpTitle: 'title',
        hpContent: 'content'
      },
      {
        id: 2,
        hpTitle: 'title2',
        hpContent: 'content2'
      } 
     ]
   }
  },
  methods: {
  showDetails(id) {
  
    for (var i = 0; i &lt;= this.hpThemes.length; i++) {
  
      if (id === this.hpThemes[i].id) {
        this.theme.hpTitle = this.hpThemes[i].hpTitle
        this.theme.hpContent = this.hpThemes[i].hpContent
      }
     }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>But I get this error: TypeError: Cannot set property 'hpTitle' of undefined.
  How to solve?
  Thanks for support.</p>