title: Property or method "users" is not defined vue js applications
body: <p>I am creating shopping shopping cart in vue js . I am want to display username into label when user provide correct informations . I am getting following errors in google chrome windows .</p>
  <p><strong>vue.js:634 [Vue warn]: Property or method &quot;users&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.
  (found in )</strong></p>
  <p>Here is  my html code .</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;Bootstrap Example&lt;/title&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;bootstap.css&quot;&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js&quot;&gt;
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;container&quot; id=&quot;app&quot;&gt;
          &lt;nav class=&quot;navbar navbar-expand-sm bg-dark navbar-dark&quot;&gt;
              &lt;ul class=&quot;navbar-nav&quot;&gt;
  
  
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; href=&quot;index.html&quot;&gt;Show All Products&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; href=&quot;/signin.html&quot;&gt;Signin&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; href=&quot;cart.html&quot;&gt; cart&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; href=&quot;/index.html&quot; v-on:click=&quot;logout&quot;&gt;Logout&lt;/a&gt;
                  &lt;/li&gt;
  
  
              &lt;/ul&gt;
              &lt;div class=&quot;nav-item active&quot; v-for=&quot;user in users&quot; &gt;
                  &lt;label&gt;Username:{{username}}&lt;/label&gt;
              &lt;/div&gt;
  
          &lt;/nav&gt;
          &lt;br /&gt;
  
         
  
          &lt;select class=&quot;form-control&quot; id=&quot;sel1&quot; v-on:change=&quot;applyfilters($event.target.value)&quot;&gt;
              &lt;option value=&quot;&quot;&gt;Select Any value&lt;/option&gt;
  
              &lt;option v-for=&quot;v in vendors&quot; :value=&quot;v.id&quot;&gt;{{ v.name }} &lt;/option&gt;
              &lt;!-- &lt;option value=&quot;v.id&quot;&gt;{{v.name}}&lt;/option&gt;--&gt;
              &lt;!--&lt;option value=&quot;2&quot;&gt;MI&lt;/option&gt;--&gt;
          &lt;/select&gt;
          &lt;br /&gt;
          &lt;div class=&quot;row col-12&quot; id=&quot;product-list&quot;&gt;
              &lt;div class=&quot;col-4 card mx-2 p-2&quot; v-for=&quot;product in products&quot; style=&quot;margin-bottom: 20px&quot;&gt;
                  &lt;p&gt;Product id:&lt;b /&gt;{{product.id}}&lt;/p&gt;
                  &lt;b&gt;Product Name :&lt;/b&gt;{{product.name}}
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-4 m-3 p-3&quot;&gt;
                          &lt;b&gt;Price :&lt;/b&gt;  {{product.price}}
                      &lt;/div&gt;
                      &lt;div class=&quot;col-4 m-3 p-3&quot;&gt;
                          &lt;b&gt;Vendor :&lt;/b&gt;  {{product.vendor.name}}
                      &lt;/div&gt;
                      &lt;div class=&quot;col-6 m-2 p-3&quot;&gt;
                          &lt;button class=&quot;col btn btn-primary&quot; v-on:click=&quot;addToCart(product.id)&quot;&gt;Buy&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script&gt;
      let app = new Vue({
          el: &quot;#app&quot;,
          data: {
              newTask: '',
              id: 0,
              url: '/todos',
              status: false,
              products: [],
              vendors: []
          },
          methods: {
              getAllProducts() {
                  new Promise((resolve) =&gt; {
                      axios.get('/api/products').then(function (response) {
                          resolve(response.data)
                      })
                  }).then((data) =&gt; {
                      this.products = data
                      // console.log(this.products)
                  })
              },
             getusers() {
                  new Promise((resolve) =&gt; {
                      axios.get('/api/users').then(function (response) {
                          resolve(response.data)
                      })
                  }).then((data) =&gt; {
                      this.users = data
  
                  })
              },
  
  
  
  
              addToCart(id) {
                  console.log(id)
                  var obj = { productId: id };
                  console.log(obj)
                  new Promise((resolve) =&gt; {
                      axios.post('/api/cart/', obj).then(function (response) {
                          resolve(response.data)
                      })
                  }).then((data) =&gt; {
  
                      console.log(data)
                      console.log(data.id)
                      if (!data.id) {
  
                          // console.log(&quot;fist login&quot;)
                          // window.alert(&quot;Fist login &quot;)
                          //  window.location = &quot;signin.html&quot;;
                      }
                      else {
                          // console.log(&quot;successfully add to cart&quot;)
                          window.alert(&quot;product has been added to your cart&quot;)
                      }
  
                  })
              },
              findAllVendors() {
                  new Promise((resolve) =&gt; {
                      axios.get('/api/vendor').then(function (data) {
                          resolve(data.data)
                          // console.log(data.data)
                      })
                  }).then((data) =&gt; {
                      this.vendors = data
                  })
              },
              applyfilters(id) {
                  new Promise((resolve) =&gt; {
                      axios.get('/api/products/' + id).then(function (response) {
                          resolve(response.data)
                      })
                  }).then((data) =&gt; {
                      this.products = data
                      // console.log(this.products)
                  })
              }
          }
      })
      app.getAllProducts();
      app.findAllVendors();&lt;/script&gt;
  </code></pre>
  <p>Hers is screen shot output .
  <a href="https://i.stack.imgur.com/LvZRj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LvZRj.png" alt="enter image description here" /></a></p>