在 Vue.js 的手表中使用 try catch

Question

我有一个文本区域。 我正在编写 object。 我想控制这些可用于语法的数据。 我的 html 代码是：

<b-form-textarea
   id="textarea-state"
   v-model="data.deviceData"
   :state="codingControl == true"
   rows="8"
 />

我在我的b-form-textarea组件中的 object 下方对此进行了编码。

{
   "device_id":"",
   "outputs":[false,false,false,false,false,false,false,false],
   "inputs":[false,false,false,false,false,false,false,false]
}

我看到这个 object 是否可用于语法。 但是try catch无法捕捉到错误。 如果 object 有语法错误，我怎么能捕捉到这个错误？

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

顺便说一句，手表正在运行。 单个问题try catch无法运行。

Answer 1

可能发生的事情是这样的：

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