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 ponent.

{
   "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.

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 ponent.

{
   "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.

• javascript
• vue.js

• What happens if you throw something dumb like '2'.yolo() in the line just after the try ? That way, it should be caugth in the catch. – kissu Commented Apr 1, 2021 at 7:39
• It will go into catch if it catches an exception, you can do that manually by using throw in your try block as shown here: developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – kissu Commented Apr 1, 2021 at 7:47
• I can't reproduce the problem in this codepen. – tony19 Commented Apr 1, 2021 at 7:48

1 Answer 1

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,
    },
}