Question

73

Using try catch in watch of Vue.js

rated 0 times [ 76] [ 3] / answers: 1 / hits: 10466 / 3 Years ago, thu, april 1, 2021, 12:00:00

I have a textarea. I'am coding an object. I want to control this data that is available for syntax. My html code is:

<b-form-textarea

   id="textarea-state"

   v-model="data.deviceData"

   :state="codingControl == true"

   rows="8"

 />

I'm coding this below object in my b-form-textarea component.

{

   "device_id":"",

   "outputs":[false,false,false,false,false,false,false,false],

   "inputs":[false,false,false,false,false,false,false,false]

}

And I watch this object is available for syntax or not. But try catch can not catch the error. How can I catch this error, if that object has a syntax error?

watch: {

   data: {

      handler(val) {

        try {

          this.datas = JSON.parse(val.deviceData)

          this.codingControl = true

        } catch (error) {

          this.datas = JSON.parse(val.deviceData)

          this.codingControl = false

        }

      },

      deep: true,

    },

}

By the way watch is runnig. single problem try catch can not run.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lara

Add To Favorites

Follow

Total Points: 462

Total Questions: 100

Total Answers: 102

Location: Jersey

Member since Mon, Jun 14, 2021

3 Years ago

lara questions

1 How to watch for multiple values in Vue 3 script setup?

Thu, May 19, 22, 00:00, 2 Years ago

1 chrome.runtime.OnMessage.addListener returns duplicate messages

Tue, Jul 27, 21, 00:00, 3 Years ago

1 NodeJS 12 SyntaxError: Unexpected token 'export'

Mon, Jul 27, 20, 00:00, 4 Years ago

1 In Blazor Server-Side how can I detect if the user tries to navigate off of the current page

Tue, Mar 17, 20, 00:00, 4 Years ago

1 Error in Entry module not found and in webpack

Wed, Feb 12, 20, 00:00, 4 Years ago

View All

answered 3 Years ago acaciac · Accepted Answer

Whats probably happening is this:

watch: {

   data: {

      handler(val) {

        try {

          this.datas = JSON.parse(val.deviceData)    // Step 1: Lets say this throws an error

          this.codingControl = true

        } catch (error) {                            // Step 2: Error get caught here

          this.datas = JSON.parse(val.deviceData)    // Step 3: Same invalid data is being parsed, so it will throw an error again 

          this.codingControl = false                 // Step 3.5: It never reaches here because the code above threw an error

        }

      },

      deep: true,

    },

}