In Microsoft Edge, Vue does a web page error! It works well in other browsers. What’s the problem?

1
votes

my vue version : 2.1.10

[Vue warn]:

Error in render: "TypeError: Unable to get property 'Product' of undefined or null reference"

(found in Root>

enter image description here

TypeError: Unable to get property 'Product' of undefined or null reference

[Vue warn]:

Property or method "*this*" 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: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in Root>)

[Vue warn]:

Error in render: "TypeError: Unable to get property 'order_id' of undefined or null reference"

(found in Root>)

TypeError: Unable to get property 'order_id' of undefined or null reference

1
javascriptvue.jsvuejs2vue-componentmicrosoft-edge
Try to provide a sample code and detailed steps to produce the issue. With only error message we cannot decide what's the actual issue and whether it is related with MS Edge or Vue. – Deepak-MSFT

1 Answers

4
votes

I ran into a similar problem. In my case, this was due to the fact that I was referring to the object inside inline-template component through this.

Example:

my-details.js

export default Vue.component('myDetails', {
  data() {
   forms: {...},
   countryCodes: {
     1: '7',
     2: '380',
     3: '375',
     4: '77',
     5: '994',
     6: '374',
     7: '995',
     8: '972',
     9: '1',
     10: '1',
     11: '996'
   },
  }
});

index.php

<section class="my-details h-base-type" inline-template is="myDetails">
  ...
  <div v-if="codeValid || countryCodes[this.forms.company.country_id] !== '7'">...</div>
  ...
</section>

After I fixed it, the error disappeared

index.php

  ...
  <div v-if="codeValid || countryCodes[forms.company.country_id] !== '7'">...</div>
  ...

Check the template document on this.