title: vue js cannot read property of undefined
body: <p>I use a <code>v-for</code> loop to list buttons for each category in my array. A function is called on click but it returns an error:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'name' of undefined</p>
  </blockquote>
  <p>Every button is properly displayed in HTML with its name.</p>
  <p><strong>v-for loop:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;button :class=&quot;{selected: category.exist === true}&quot; v-for=&quot;category in categories&quot; :key=&quot;category.id&quot; v-on:click=&quot;pushFilter(); category.exist = !category.exist&quot;&gt;{{ category.name }} {{ category.exist }}&lt;/button&gt;
  </code></pre>
  <p><strong>categories data:</strong></p>
  <pre class="lang-js prettyprint-override"><code>export default {
    data: function () {   
      return {
        categories: [
          {
            name: 'name1',
            exist: false,
          },
          {
            name: 'name2',
            exist: false,
          },
        ],
  </code></pre>
  <p><strong>Method:</strong></p>
  <pre class="lang-js prettyprint-override"><code>methods: {
    pushFilter() {
      console.log(this.category.name);
    },
  }
  </code></pre>