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