Question

I'm following the code from Vue.js in Action, Chapter 3. (much deleted for brevity...)

var webstore = new Vue({
  el: '#app',
  data: {
    sitename: "Vue.js Pet Depot",
    showProduct: true,
    product: {
      id: 1001,
      title: "Cat Food, 25lb bag",
          ... deleted for brevity
    },
    cart: []
  }
  methods: {
    addToCart: function() {
      this.cart.push( this.product.id );
    },
    showCheckout() {
      this.showProduct = this.showProduct ? false: true;
    },
  },
  computed: {
    cartItemCount() {
      return this.cart.length || '';
    },
    canAddToCart() {
      return this.product.availableInventory > this.cartItemCount;
    }
  },
  filters: { ... }
})
  1. Looking at the code in methods or computed, it doesn't refer to this.data.cart, but to this.cart. That is, Vue moves all the fields from data up a level. This can be confirmed by looking at the webstore variable in the Chrome console. Is saving 5 characters of typing really worth the confusion? And possible errors - what if I have something in my data that has a name collision?

  2. Vue moves the functions from methods up a level - there is no methods.addToCart(), instead there is addToCart(). Again, is saving a little typing worth the confusion and risk of namespace errors?

  3. Further looking in Chrome, the data field is no longer called data, it is now _data. It may also be found under $options.data.

I'm sure there's more examples, but this is a start. Is there a good technical reason why Vue magically rearranges this basic stuff?

No correct solution

Licensed under: CC-BY-SA with attribution
scroll top