CODEWITHSUNDEEP
vue.jsvuejs3
kasp3rsky
kasp3rsky

Reputation: 167

Vuejs 3 props are Proxy

I am passing array as a prop to another component, and when I want to read this on mounted in that component, I got Proxy {}. How to read data from this prop? You can see in example when I want to console log prop, result is Proxy {}. I can see all values in HTML structure, but not in the console on mounted.

<template>
  <div class="custom-select-container">
    <div class="selected-item" @click="openSelect">
      <span class="selected-items-text">{{ selectedItem.name }}</span>
      <span class="icon-arrow1_b selected-items-icon" :class="{ active: showOptions }" />
    </div>
    <transition name="fade">
      <ul v-show="options.length && showOptions" class="custom-select-options">
        <li v-for="(option, index) in options" :key="index" class="custom-select-item">{{ option.name }}</li>
      </ul>
    </transition>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },

  setup(props) { 
    let showOptions = ref(false);
    let selectedItem = ref(props.options[0])

    const openSelect = () => {
      showOptions.value = !showOptions.value
    }

    onMounted(() => {
      console.log('test', props.options)
    })

    return { 
      openSelect,
      showOptions,
      selectedItem
    }
  }
}
</script>

Parent component where I am passing data:

<template>
  <div class="page-container">
    <div>
      <div class="items-title">
        <h3>List of categories</h3>
        <span>({{ allCategories.length }})</span>
      </div>
      <div class="items-container">
        <div class="item" v-for="(category, index) in allCategories" :key="index">
          <span class="item-cell size-xs">{{ index + 1 }}.</span>
          <span class="item-cell size-l">{{ category.name }}</span>
        </div>
      </div>
    </div>
    <custom-select
      :options="allCategories"
    />
  </div>
  
</template>

<script>
import CustomSelect from '../components/Input/CustomSelect'
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  components: {
    CustomSelect
  },

  computed: {
  
  },

  setup() {
    const store = useStore()

    const allCategories = computed(() => store.getters['categories/getAllCategories'])

    return {
      allCategories
    }
  }
}
</script>

Upvotes: 2

Views: 6460

Answers (1)

tauzN
tauzN

Reputation: 7001

That's how reactivity works in Vue3.

use

console.log(JSON.parse(JSON.stringify(data))

or

console.log(JSON.stringify(data, null, 2))

to show the content of proxies in console

Upvotes: 6

Related Questions