title: VueJS Adding data from query parameters
body: <p>I am working on a small purely client-side VueJS application that uses <code>VueRouter</code> to update the URL when data is entered into the application, so users can use the URL to refresh the page and reload their data into the app when refreshing the page.  The data is stored in query parameters, ex.:</p>
  <pre><code>.../app.html#/?time=300&amp;time=300&amp;distance=300&amp;distance=300&amp;unit=m&amp;unit=m
  </code></pre>
  <p>The data is parsed as needed by the <code>router</code>, but when I add the data to my empty <code>performance</code> array, the <code>:class</code> attribute in my markup raises a</p>
  <blockquote>
  <p>TypeError: Cannot read property 'length' of undefined</p>
  </blockquote>
  <p>Where <code>undefined</code> is the <code>performances</code> array.  I have narrowed this issue down to the <code>:class</code> attribute inside of the <code>v-for</code> performance loop by removing the <code>:class</code> from the app's markup and successfully rendered the site.  I am guessing that the <code>performances</code> data array has not been passed to the <code>:class</code>.</p>
  <p>I did not see any mention of this type of routing in the <a href="https://router.vuejs.org/en/" rel="nofollow noreferrer">VueRouter</a> documentation.  How should data be passed from the URL query parameters into the application?   Here is my relevant code (condensed for the sake of brevity):</p>
  <pre><code>// js file
  var router = new VueRouter({}); // empty because no routes, just query parameters, so no need for list
  
  var app = new Vue({
      el: '#app',
      data: function() {
          return {
              performances: [],
              units: units,
              newPerformance: {
                  distance: {
                      value: '',
                      units: units.distance.options[0]
                  },
                  time: {
                      formatted: '',
                      value: ''
                  },
              },
              editingPerformance: null,
          }
      },
      router: router,
      watch: {
          performances: {
              handler: function() {
                  this.drawChart();
                  this.updateURL();
              },
              deep: true
          }
      },
      updateURL: function() {
          var times = this.performances.map(function(v) {
                  return v.time.value
              }),
              distances = this.performances.map(function(v) {
                  return v.distance.value
              }),
              units = this.performances.map(function(v) {
                  return v.distance.units.value
              });
          router.push({
              query: {
                  time: times,
                  distance: distances,
                  dunit: units
              }
          });
      }
      ....
  });
  </code></pre>
  <p>HTML file</p>
  <pre><code>...
  &lt;div v-for=&quot;(performance, index) in performances&quot; :class=&quot;{'card-list': performances.length &gt; 1 }&quot;&gt;
  ...
  &lt;/div&gt;
  ...
  </code></pre>
  <p>I have read the  <a href="https://v2.vuejs.org/v2/guide/reactivity.html" rel="nofollow noreferrer">Reactivity in Depth</a> documentation and tried such solutions as:</p>
  <pre><code>    Vue.nextTick(function() {
          this.performances.push(performance);
      })
  </code></pre>
  <p>and</p>
  <pre><code>    Vue.set(app, 'performances',performanceArray);
  </code></pre>
  <p>which result in the same error.  I can provide more code upon request.</p>
  <p>Edit: Adding stack traces:</p>
  <pre><code>[Vue warn]: Error when rendering root instance: warn @ vue.js:513
  Vue._render @ vue.js:2934
  (anonymous function) @ vue.js:2335
  get @ vue.js:1643run @ vue.js:1712
  flushSchedulerQueue @ vue.js:1530
  (anonymous function) @ vue.js:465
  nextTickHandler @ vue.js:414
  </code></pre>
  <p>followed immediately by:</p>
  <pre><code>vue.js:427 TypeError: Cannot read property 'length' of undefined(…)
  logError @ vue.js:427
  </code></pre>