<template>
  <view>
    <text class="mb-10 bold">array literal</text>
    <view class="mb-10 flex justify-between flex-row">
      <text>str: </text>
      <text id="array-literal-str">{{ str }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>num: </text>
      <text id="array-literal-num">{{ num }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>bool: </text>
      <text id="array-literal-bool">{{ bool }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>obj: </text>
      <text id="array-literal-obj">{{ JSON.stringify(obj) }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>arr: </text>
      <text id="array-literal-arr">{{ JSON.stringify(arr) }}</text>
    </view>
  </view>
</template>

<script lang="uts">
export default {
  props: ['str', 'num', 'bool', 'obj', 'arr'],
  mounted() {
    console.log('this.$props.str: ',this.$props['str']);
    console.log('this.$props.num: ',this.$props['num']);
    console.log('this.$props.bool: ',this.$props['bool']);
    console.log('this.$props.arr: ',this.$props['arr']);
    console.log('this.$props.obj: ',this.$props['obj']);
  }
};
</script>