vue computed cannot get the solution of this property or method

computered cannot get the attribute or method of this

Scene

The arrow function using es6 syntax in vue cannot use this method below normally

reason

Computed attribute computed should not use arrow functions to define computed attributes. Because arrow functions bind the context of the parent scope, this will not point to Vue as expected.

• Before modification:

computed: {
    isShowDialog: () => {
      return this.$;
    }
  },

• After modification:

computed: {
    isShowDialog: function() {
      return this.$;
    }
  },

Application of vue computing attribute computed

computed compute properties

Vue itself supports the use of complex expressions in templates to express business data, but this will make the template content too messy. If there is a real need, it can be implemented through computed computing properties. computed can perform complex synthesis processing on other data.

grammar:

new Vue({
  el:xx,
  data:xx,
  computed:{
    // Property name: function(){}       Normal function assignment    // Attribute name(){}                           Simple member function assignment    Attribute name(){
      // Business expression implementation, you can operate data members through this      return  Return result
    }
  }
})

Note: Computing attributes (normal function assignment) or (simple member function assignment) is OK, do not use arrow functions.

use:

Formally, how to apply data members, how to apply computed attributes

{{ computedCalculate attribute names }}     <!-- In the template-->
                    <!-- VueInside the instance-->

computed application scenario

If the page needs to access a data, the data is relatively complex and needs to be made through complex logic through other data, and you can use "calculated properties".

computed computing attribute characteristics

• If the data associated with the calculated attribute changes, it will be recompiled and executed, and the corresponding new result will be obtained and used, i.e. responsive (entry).
• The return information of the calculation attribute changes, and the place where it is used will be recompiled and executed, and there is an exit responsive form.
• The computed attribute can use this keyword to access data members, which is equivalent to a Vue object.
• Each computed attribute needs to return the processing result through the return keyword.

The difference between computed calculation properties and methods

• The computed calculation attribute itself has a cache. When the associated data has not changed, the cache result will be used in the future to save resources. The methods method has no cache. Each time the method body is accessed, it needs to be loaded and executed, which consumes resources.
• The application logic of methods is more complex. For example, ajax can be embedded internally or called to each other, while computed is relatively simple and just operates data.

computed calculation attribute case

Get and apply filtered brand data through computed computing properties

step:

1. Create computed properties

Create computed properties inside the Vue instance (at the side by side with el, data, methods) with the name brandFilters

// Declare the calculation attributescomputed:{
  // Create a computed property named brandsFilters  brandsFilters () {
    // This keyword can be used normally    return (item=>{
      return ()
    })
  }
},

2. Apply calculation properties

<table v-if=">0">
  <tr>
    <td></td>
    <td>Serial number</td>
    <td>name</td>
    <td>Creation time</td>
    <td>operate</td>
  </tr>
  <tr v-for="(item,k) in brandsFilters" :key="">
    <td><input type="checkbox"></td>
    <td>{{  }}</td>
    <td>{{  }}</td>
    <td>{{  }}</td>
    <td><button @click="del(k)">delete</button></td>
  </tr>
</table>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.