OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Vue this.$emits suddently stops working in the middle of a function call

  • Thread starter Thread starter Nathaniel Reeves
  • Start date Start date
N

Nathaniel Reeves

Guest
I have this funciton that is suposed to emit updates to the parent component before and after it sends a request to the server. I am using vue to run the front end. Here is the function I am havving issues with:

Code:
    saveUpdates: async function () {
      const component = {
        doc: {
          specifications: this.edit_specs_buffer
        },
        component_id: this.id
      }
      this.req.upsertRecord('Components', component)

      this.$emit('toggleLoaded', false) // Does Execute // Does Execute
      const resp = await this.req.sendRequest(window.origin) // Does Execute
      this.$emit('refreshParent', true) // Does NOT Execute (This is broken)

      const createToast = this.$root.createToast // Does Execute
      resp.messages.flash.forEach(message => { // Does Execute
        createToast(message) // Does Execute
      })
      // Everything else works
      if (resp.status !== 201) {
        return false
      }
      this.req = new CustomRequest(this.$cookies.get('session'))
      return true
    },

After the await this.req.sendRequest line, this.$emit doesn't work at all. I have tried fake functions that just send a console log to test if its just he refreshParent emit that is the issue. For some reason this.$emit completely stops working after the sendRequest call.

For additional reference, here is the child component in the parent component:

Code:
          <SpecificationsComponent
            :key="specs_key"
            :doc="component_data.doc"
            :spectype="'component'"
            :name="get_component_primary_name(component_data)"
            :id="component_data.component_id"
            v-on:edit-specs="(e) => edit_specs = e"
            v-on:toggle-loaded="toggleLoaded"
            v-on:refresh-parent="refreshParent"
          ></SpecificationsComponent>

Code:
  methods: {
    toggleLoaded: function (val) {
      this.loaded = val
    },
    refreshParent: function (val) {
      console.log('refreshing parent')
      console.log(val)

      // this is a fetch request that is suposed to fire after the
      // sendRequest finishes making changes to the server to update the
      // page with the most recent information.
      this.getComponentData()

    },

What confuses me the most is that this.$root works fine while this.$emit doesn't. Any ideas?

package.json

Code:
"dependencies": {
    "@babel/polyfill": "7.12.1",
    "@dagrejs/dagre": "1.1.2",
    "@popperjs/core": "^2.11.8",
    "@vue-flow/background": "1.3.0",
    "@vue-flow/controls": "1.1.1",
    "@vue-flow/core": "1.36.0",
    "@vue-flow/minimap": "1.4.0",
    "@vue-flow/node-resizer": "1.3.6",
    "@vue-flow/node-toolbar": "1.1.0",
    "@vue/cli": "5.0.8",
    "@vue/compat": "3.4.30",
    "@vuelidate/core": "2.0.3",
    "@vuelidate/validators": "2.0.4",
    "bootstrap-vue": "npm:@ankurk91/bootstrap-vue@^3.0.2",
    "chartjs": "0.3.24",
    "core-js": "3.32.1",
    "jquery": "3.7.1",
    "lodash": "^4.17.21",
    "mutationobserver-shim": "0.3.7",
    "popper.js": "1.16.1",
    "portal-vue": "2.1.7",
    "vue": "3.4.26",
    "vue-barcode-reader": "1.0.3",
    "vue-chartjs": "5.3.1",
    "vue-cookies": "1.8.3",
    "vue-qr-generator": "3.0.1",
    "vue-router": "4.3.2",
    "vue-select": "3.20.3",
    "vue3-easy-data-table": "1.5.47"
  },

I tried to figure out if there was somthing wrong with how I am calling and using async functions. After fiddling with that for awhile, i realized all those async calls must be working becuase I am able to see the 201 response from the server indicating that the sendRequest function completed correctly and gave a finished output instead of a promise.

*EDIT

Here is the sendRequest function

Code:
async sendRequest (origin) {
    const fetchRequest = origin + '/api/v1/submit'
    // eslint-disable-next-line
    console.log(
      'PUT ' + fetchRequest
    )

    const response = await fetch(fetchRequest, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'include',
      body: JSON.stringify(this.compileRequest())
    })

    if (response.status === 201) {
      // eslint-disable-next-line
      console.log('Request successful')
    } else {
      // eslint-disable-next-line
      console.log('Request failed')
    }

    const data = await response.json()
    data.status = response.status
    // eslint-disable-next-line
    console.log(data)
    return data
  }

I am not sure how I can make this reproducable. There is so much other code going on with these vue components. Everything is a bit jumbled up as well. If you have any advice on this matter I'll take it!

<p>I have this funciton that is suposed to emit updates to the parent component before and after it sends a request to the server. I am using vue to run the front end. Here is the function I am havving issues with:</p>
<pre class="lang-js prettyprint-override"><code> saveUpdates: async function () {
const component = {
doc: {
specifications: this.edit_specs_buffer
},
component_id: this.id
}
this.req.upsertRecord('Components', component)

this.$emit('toggleLoaded', false) // Does Execute // Does Execute
const resp = await this.req.sendRequest(window.origin) // Does Execute
this.$emit('refreshParent', true) // Does NOT Execute (This is broken)

const createToast = this.$root.createToast // Does Execute
resp.messages.flash.forEach(message => { // Does Execute
createToast(message) // Does Execute
})
// Everything else works
if (resp.status !== 201) {
return false
}
this.req = new CustomRequest(this.$cookies.get('session'))
return true
},
</code></pre>
<p>After the await this.req.sendRequest line, this.$emit doesn't work at all. I have tried fake functions that just send a console log to test if its just he refreshParent emit that is the issue. For some reason this.$emit completely stops working after the sendRequest call.</p>
<p>For additional reference, here is the child component in the parent component:</p>
<pre class="lang-html prettyprint-override"><code> <SpecificationsComponent
:key="specs_key"
:doc="component_data.doc"
:spectype="'component'"
:name="get_component_primary_name(component_data)"
:id="component_data.component_id"
v-on:edit-specs="(e) => edit_specs = e"
v-on:toggle-loaded="toggleLoaded"
v-on:refresh-parent="refreshParent"
></SpecificationsComponent>
</code></pre>
<pre class="lang-js prettyprint-override"><code> methods: {
toggleLoaded: function (val) {
this.loaded = val
},
refreshParent: function (val) {
console.log('refreshing parent')
console.log(val)

// this is a fetch request that is suposed to fire after the
// sendRequest finishes making changes to the server to update the
// page with the most recent information.
this.getComponentData()

},
</code></pre>
<p>What confuses me the most is that this.$root works fine while this.$emit doesn't. Any ideas?</p>
<p>package.json</p>
<pre><code>"dependencies": {
"@babel/polyfill": "7.12.1",
"@dagrejs/dagre": "1.1.2",
"@popperjs/core": "^2.11.8",
"@vue-flow/background": "1.3.0",
"@vue-flow/controls": "1.1.1",
"@vue-flow/core": "1.36.0",
"@vue-flow/minimap": "1.4.0",
"@vue-flow/node-resizer": "1.3.6",
"@vue-flow/node-toolbar": "1.1.0",
"@vue/cli": "5.0.8",
"@vue/compat": "3.4.30",
"@vuelidate/core": "2.0.3",
"@vuelidate/validators": "2.0.4",
"bootstrap-vue": "npm:@ankurk91/bootstrap-vue@^3.0.2",
"chartjs": "0.3.24",
"core-js": "3.32.1",
"jquery": "3.7.1",
"lodash": "^4.17.21",
"mutationobserver-shim": "0.3.7",
"popper.js": "1.16.1",
"portal-vue": "2.1.7",
"vue": "3.4.26",
"vue-barcode-reader": "1.0.3",
"vue-chartjs": "5.3.1",
"vue-cookies": "1.8.3",
"vue-qr-generator": "3.0.1",
"vue-router": "4.3.2",
"vue-select": "3.20.3",
"vue3-easy-data-table": "1.5.47"
},
</code></pre>
<p>I tried to figure out if there was somthing wrong with how I am calling and using async functions. After fiddling with that for awhile, i realized all those async calls must be working becuase I am able to see the 201 response from the server indicating that the sendRequest function completed correctly and gave a finished output instead of a promise.</p>
<p>*EDIT</p>
<p>Here is the sendRequest function</p>
<pre class="lang-js prettyprint-override"><code>async sendRequest (origin) {
const fetchRequest = origin + '/api/v1/submit'
// eslint-disable-next-line
console.log(
'PUT ' + fetchRequest
)

const response = await fetch(fetchRequest, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify(this.compileRequest())
})

if (response.status === 201) {
// eslint-disable-next-line
console.log('Request successful')
} else {
// eslint-disable-next-line
console.log('Request failed')
}

const data = await response.json()
data.status = response.status
// eslint-disable-next-line
console.log(data)
return data
}
</code></pre>
<p>I am not sure how I can make this reproducable. There is so much other code going on with these vue components. Everything is a bit jumbled up as well. If you have any advice on this matter I'll take it!</p>
 

Latest posts

S
Replies
0
Views
1
Souvik Manna
S
S
Replies
0
Views
1
Shelling ford
S
Top