0

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?

user949300
  • 8,679
  • 2
  • 26
  • 35
  • 1
    Are you asking why the arguments object you pass in doesn't have the same structure as the object you are creating? The object you make doesn't have to have the same structure as the arguments object you pass in. The arguments object just makes it a lot easier to handle when you have a lot of optional things that go into making an object. – Becuzz Apr 25 '19 at 17:17
  • 1
    This is probably a consequence of the way MVVM works in Vue. It is not troublesome for someone who is accustomed to Vue. – Robert Harvey Apr 25 '19 at 18:45

0 Answers0