Facing problem when using props in watch in Composition API

Ivana 0
Viewed 26

I am trying to use prop in watch() in Composition API/Vue 3 in order to watch changes and to add new password value received from prop. I have transformed with let {passwordValue} = toRefs(props) to reactive value, and I am using it in watch, but it doesn't even conosole.log the currentValue and oldValue in watch. Anyone has a clue?

Html:

    <template>
  <div class="dpm-password-textarea dx-field">
    <dpm-drawer-heading
      :label="label"
      :show-label="showLabel"
      :icon="headingIcon"
      :tooltip="headingTooltip"
    />
    <div class="password-conatiner">
      <DxTextArea
        :width="width"
        :height="height"
        :disabled="disabled"
        :value="passValue"
        :placeholder="placeholder"
        @keypress.prevent
      >
        <button
          :class="[iconPassword, iconPasswordStyle]"
          @click="togglePasswordMask"
          :style="{ right: iconPasswordStyle }"
        ></button>
        <button
          v-if="showCopyIcon === true"
          :class="[iconCopy, iconCopyTransition]"
          @click="copyPassword"
          :style="{ right: iconCopyStyle }"
        ></button>
      </DxTextArea>
    </div>
  </div>
</template>

JS

export default defineComponent({
  name: "DpmPasswordTextarea",
  components: { DxTextArea, DpmDrawerHeading, DxButton },
  props: {
    name: { type: String, default: "" },
    label: { type: String, default: "" },
    showLabel: { type: Boolean, default: true },
    headingIcon: {
      type: String as PropType<DpmDrawerHeadingIcons>,
      default: DpmDrawerHeadingIcons.None,
    },
    headingTooltip: { type: String, default: "" },
    placeholder: { type: String, default: "Api key code" },
    disabled: { type: Boolean, default: false },
    height: { type: String, default: "50px" },
    width: { type: String, default: "100%" },
    maxLength: { type: String, default: undefined },
    iconCopy: { type: String, default: "dx-icon dx-icon-paste" },
    iconPassword: { type: String, default: "mdi mdi-eye" },
    iconPasswordUnStriked: { type: String, default: "mdi mdi-eye" },
    iconPasswordStriked: { type: String, default: "mdi mdi-eye-off" },
    passwordValue: { type: String, default: "Api key code" },
    showCopyIcon: { type: Boolean, default: false },
    durationInClipboard: { type: Number, default: 15000 },
  },

  setup(props: any, context: any) {
    const iconPasswordUnStriked = ref<string>(props.iconPasswordUnStriked);
    const iconPasswordStriked = ref<string>(props.iconPasswordStriked);
    const iconPassword = ref<string>(props.iconPassword);
    const iconPasswordStyle = ref<string>("");
    const passwordVisible = ref<boolean>(true);
    let {passwordValue} = toRefs(props)
    const passValue = ref<string>("");
    const iconCopy = ref<string>(props.iconCopy);
    const showCopyIcon = ref<boolean>(props.showCopyIcon);
    const iconCopyStyle = ref<string>("");
    const iconCopyTransition = ref<string>("");
...


    watch(passwordValue, (currentValue, oldValue) => {
      console.log(currentValue)
      console.log(oldValue)
passValue.value = passowordValue


    })
    return {
      iconPasswordUnStriked,
      iconPasswordStriked,
      iconPassword,
      iconPasswordStyle,
      passwordVisible,
      passwordValue,
      passValue,
      iconCopy,
      showCopyIcon,
      iconCopyStyle,
      iconCopyTransition,
      togglePasswordMask,
      copyPassword,
    };
  },
});
</script>
watch vue-composition-api vuejs3 typescript
1 Answers

Solution is to add option to the watch method {immediate:true}, in order to automatically trigger watching on first prop change, therefore the watch would be like this

    watch(passwordValue, (currentValue, oldValue) => {
      console.log(currentValue)
      console.log(oldValue)
      passValue.value = passwordValue
    }, {immediate:true})

It works also with, by directly using props.passwordValue as callback in watch like this:

 watch(() => props.passwordValue, (currentValue, oldValue) => {
      console.log(currentValue)
      console.log(oldValue)
      passValue.value = passwordValue
    }, {immediate:true})
Ivana0
Related