<template>
  <div :class="classes">
    <p class="elem-gutter-content">
      <span v-for="(cont, index) in conts" :key="index">{{ cont }}</span>
    </p>
  </div>
</template>

<script>
export default {
  name: "ElemGutter",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      conts: [],
    };
  },
  computed: {
    classes() {
      return ["elem-gutter", `elem-gutter-${this.data.direction}`];
    },
  },
  created() {
    this.conts = this.data.content.split("").reverse();
  },
  methods: {},
};
</script>
