1

when I am using developer tools in google chrome, in Sources tab, when I hover mouse cursor on a variable like newVal, it shows its value:

enter image description here

With the following code

  watch: {
    checkedConfigInDialog(newVal, oldVal) {
      debugger;
      this.dialogAddConfigNodeButtonEnabledDisabled = !newVal;
    }
  },

export default {
  data() {
      return {
        dialogAddConfigNodeButtonEnabledDisabled: true
      }
 }

It doesn't work for this.dialogAddConfigNodeButtonEnabledDisabled, which is defined in vue's data(); I can find dialogAddConfigNodeButtonEnabledDisabled in this, but it is inconvenient as there are too many variables in this to go through:

enter image description here

How to quickly and easily get the value of dialogAddConfigNodeButtonEnabledDisabled when debugging?

Here is the screenshot of my vue devtools: enter image description here

fall
  • 984
  • 11
  • 33
  • You can do this.dialogAddConfigNodeButtonEnabledDisabled = ... or newVal = ... in a console at a breakpoint. You can also do $vm.dialogAddConfigNodeButtonEnabledDisabled = ... when a comp is selected in vue devtools. It's unclear if you tried that. – Estus Flask May 06 '23 at 09:17
  • @EstusFlask I am in vue devtools now and have a component selected, but I don't see a place where I could type `$vm.dialogAddConfigNodeButtonEnabledDisabled` like in console, where should I type this? I added the vue devtools screenshot in my question. – fall May 08 '23 at 08:32
  • As said, in a console. It can be configured to be shown in vue devtools tab, but any way – Estus Flask May 08 '23 at 10:14

0 Answers0