Scope of locally defined variables in vue

Question

In this sample:

<template>
  <div>
    <p 
      v-for="prop in receivedPropsLocal"
      :key="prop.id"
    >
        {{prop}}
    </p>
  </div>
</template>

<script>

export default {
  name: "PropsReceiver",
  props: {
    receivedProps: {        
      required: true,
      type: Array,      
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      receivedPropsLocal: Array,
    };
  },
  methods: {
  },
  watch: {
    receivedProps: {
      deep: true,
      handler(val) {
        let tmp = Object.entries(Object.assign({}, val));
        this.receivedPropsLocal = tmp;
      },
    },
  },
  computed: {
    getReceivedPropsLocal: {
      get() {
        if (!this.receivedPropsLocal) {
          let tmp = Object.entries(Object.assign({}, this.receivedProps));
          this.receivedPropsLocal = tmp;
          return this.receivedPropsLocal;
        }
        return this.receivedPropsLocal;
      },
      set(value) {
        this.receivedPropsLocal = value;
      },
    },
  },
};
</script>

what's the scope of tmp? Is it handled similarly to other entries in data() or not? or it doesn't matter.

tmp is a local variable. It is not an entry in data(). It is completely invisible to Vue. — Bergi
– Bergi, Commented Jun 22, 2021 at 12:35
That makes intuitive sense; there is a "caveat" though: stackoverflow.com/a/53757193/1079483 — Sebi
– Sebi, Commented Jun 22, 2021 at 12:58

Kévin-DDR · Accepted Answer · 2021-06-22 12:55:37Z

1

I believe tmpis only accessible from inside the handler function since you used let to declare it.

You should declare it directly in the data object to use it anywhere in the component.

answered Jun 22, 2021 at 12:55

Kévin-DDR

565 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scope of locally defined variables in vue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related