title: beginner with vue.js treeview
body: <p>Learning JS and trying to figure out the tree view from Vue.js.</p>
  
  <p>The example is on the Vue site here: <a href="http://legacy.vuejs.org/examples/tree-view.html" rel="nofollow">Tree view on Vue site</a></p>
  
  <p>What I have done is created a html doc that has the HTML code as per JSFiddle:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;style&gt;
  body {
    font-family: Menlo, Consolas, monospace;
    color: #444;
  }
  .item {
  cursor: pointer;
  }
  .bold {
    font-weight: bold;
  }
  ul {
    padding-left: 1em;
    line-height: 1.5em;
    list-style-type: dot;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script type="text/x-template" id="template"&gt;
    &lt;div v-class="bold: isFolder"
      v-on="click: toggle, dblclick: changeType"&gt;
      {{model.name}}
      &lt;span v-if="isFolder"&gt;[{{open ? '-' : '+'}}]&lt;/span&gt;
    &lt;/div&gt; 
    &lt;ul v-show="open" v-if="isFolder"&gt;
      &lt;li class="item"
        v-repeat="model: model.children"
        v-component="item"&gt;
      &lt;/li&gt;
      &lt;li v-on="click: addChild"&gt;+&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/script&gt;
  &lt;script src="JS/app.js"&gt;&lt;/script&gt;
  &lt;script src="JS/vue.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;(You can double click on an item to turn it into a folder.)&lt;/p&gt;
  
  &lt;!-- the demo root element --&gt;
  &lt;ul id="demo"&gt;
    &lt;li class="item"
      v-component="item"
      v-with="model: treeData"&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then I added the Javascript to a separate app.js file and put it in a folder in same dir as html file called JS.</p>
  
  <p>I have also put vue.min.js in that folder but the code doesn't work at all.
  It appears that the script is just not running as the CSS and everything else displays OK.
  I'm probably making a fairly elementary mistake here in terms of pointing towards correct js files or leaving something out but the syntax hasn't been changed from the working online demo so I doubt it's that.</p>
  
  <p>JS:</p>
  
  <pre><code>// demo data
  var data = {
    name: 'My Tree',
    children: [
      { name: 'hello' },
      { name: 'wat' },
      {
        name: 'child folder',
        children: [
          {
            name: 'child folder',
            children: [
              { name: 'hello' },
              { name: 'wat' }
            ]
          },
          { name: 'hello' },
          { name: 'wat' },
          {
            name: 'child folder',
            children: [
              { name: 'hello' },
              { name: 'wat' }
            ]
          }
        ]
      }
    ]
  }
  
  // define the item component
  Vue.component('item', {
    template: '#template',
    data: function () {
      return {
        open: false
      }
    },
    computed: {
      isFolder: function () {
        return this.model.children &amp;&amp;
          this.model.children.length
      }
    },
    methods: {
      toggle: function () {
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      changeType: function () {
        if (!this.isFolder) {
          this.model.$add('children', [])
          this.addChild()
          this.open = true
        }
      },
      addChild: function () {
        this.model.children.push({
          name: 'new stuff'
        })
      }
    }
  })
  
  // boot up the demo
  var demo = new Vue({
    el: '#demo',
    data: {
      treeData: data
    }
  })
  </code></pre>
  
  <p>If anyone has any ideas of what I am doing incorrectly please let me know.</p>
  
  <p>Issue present on all browsers(Safari, Firefox, Chrome) -> I am fairly certain this is a high level issue as the JSFiddle page and example page linked above both display properly and I literally just copy+pasted the code into the html and js files in addition to downloading and referencing vue.min.js</p>
  
  <p>All help and suggestions welcome!</p>
  
  <p>M</p>
  
  <p>Edit:</p>
  
  <p>After Orland's answer below I included all the code in one file as below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;style&gt;
  body {
    font-family: Menlo, Consolas, monospace;
    color: #444;
  }
  .item {
    cursor: pointer;
  }
  .bold {
    font-weight: bold;
  }
  ul {
    padding-left: 1em;
    line-height: 1.5em;
    list-style-type: dot;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script src="https://cdn.rawgit.com/yyx990803/vue/master/dist/vue.min.js"&gt;&lt;/script&gt;
  &lt;!-- item template --&gt;
  &lt;script type="text/x-template" id="item-template"&gt;
    &lt;div v-class="bold: isFolder"
      v-on="click: toggle, dblclick: changeType"&gt;
      {{model.name}}
      &lt;span v-if="isFolder"&gt;[{{open ? '-' : '+'}}]&lt;/span&gt;
    &lt;/div&gt;
    &lt;ul v-show="open" v-if="isFolder"&gt;
      &lt;li class="item"
        v-repeat="model: model.children"
        v-component="item"&gt;
      &lt;/li&gt;
      &lt;li v-on="click: addChild"&gt;+&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/script&gt;
  
  &lt;p&gt;(You can double click on an item to turn it into a folder.)&lt;/p&gt;
  
  &lt;!-- the demo root element --&gt;
  &lt;ul id="demo"&gt;
      &lt;item model="{{ treeData }}"&gt;&lt;/item&gt;
  &lt;/ul&gt;
  &lt;script&gt;
      // demo data
      var data = {
          name: 'My Tree',
          children: [
              { name: 'wat' },
              {
                  name: 'child folder',
                  children: [
                      {
                          name: 'child folder',
                          children: [
                              { name: 'hello' },
                              { name: 'wat' }
                          ]
                      },
                      { name: 'hello' },
                      { name: 'wat' },
                      {
                          name: 'child folder',
                          children: [
                              { name: 'hello' },
                              { name: 'wat' }
                          ]
                      }
                  ]
              }
          ]
      }
  
      // define the item component
      Vue.component('item', {
          template: '#item-template',
          props: ['model'],
          data: function () {
              return {
                  open: false,
                  model: {}
              }
          },
          computed: {
              isFolder: function () {
                  return this.model.children &amp;&amp;
                          this.model.children.length
              }
          },
          methods: {
              toggle: function () {
                  if (this.isFolder) {
                      this.open = !this.open
                  }
              },
              changeType: function () {
                  if (!this.isFolder) {
                      this.model.$add('children', [])
                      this.addChild()
                      this.open = true
                  }
              },
              addChild: function () {
                  this.model.children.push({
                      name: 'new stuff'
                  })
              }
          }
      })
  
      // boot up the demo
      var demo = new Vue({
          el: '#demo',
          data: {
              treeData: data
          }
      })
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works perfectly but I am developing an App that will be run mostly offline so I tried changing the vue.min.js source to the local vue.min.js I have and it stops working!! The change I make is:</p>
  
  <p>From <code>&lt;script src="https://cdn.rawgit.com/yyx990803/vue/master/dist/vue.min.js"&gt;&lt;/script&gt;</code>
  to <code>&lt;script src="JS/vue.min.js"&gt;&lt;/script&gt;</code></p>
  
  <p>Cannot understand this but assume it is something I am doing in locating the vue.min.js!!!???</p>