<template>
    <div class="flex">
        <template v-for="(item,index) in stringArr">
          <span
            @click="checkItem(item,index)"
            :class="{'bg': (arr.indexOf(index) > -1)} "
            class="cut-string saga-border pointer border-hover"
          >{{item}}</span>
</template>
  </div>
</template>
<script>
    export default {
        props: {
            string: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                stringArr: this.string.split(""),
                obj: {},
                arr: []
            }
        },
        created() {},
        mounted() {},
        methods: {
            checkItem(item, index) {
                this.obj[index] = item
                this.arr.push(index)
            },
            clear() {
                this.stringArr = this.string.split("")
                this.obj = {}
                this.arr = []
            },
            getData() {
                let string = ""
                for (let key in this.obj) {
                    string += this.obj[key]
                }
                console.log(string)
                return string
            }
        },
        watch: {
            string: function() {
                this.clear()
            }
        }
    }
</script>
<style lang="scss" scoped>
    .cut-string {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
    .bg {
        background: red;
    }
</style>
