How to remove duplicate string from v-textarea

Question

I am currently implementing simple content builder with vuetify v-textarea. I wanted to remove some duplicated string ex. "{{date}}" if it's already existing from a field with vuetify v-textarea. I provide a snippet code below;

Ex. 
I type or drag component with value of **{{date}}**

case 1 :     {{ date }}  {{date}} <-- remove this 

case 2 :     {{ date }}  {{date}}  {{date}} <-- remove this

this is the actual code from my current problem

TEMPLATE

        <v-textarea outlined dense @drop="drop($event)" @dragover="allowDrop($event)" placeholder="Paragraph" v-model="paragraph"/>

        <div class="mx-2" >
            <v-btn outlined dense color="#0057AD" draggable="true" :disabled="dragable.date" @dragstart="drag($event)" :value="'{{date}}'">Date</v-btn>
        </div>

SCRIPT

    onDateSet(value)
    {   
        let _value = value; 
        let _text = value;  

            this.dragable.date = false;
            this.dragable.time = true;
            this.dragable.assignment = true;

            if(_value.indexOf("{{date}}") !== -1)
            {   
                this.dragable.date = true;
                this.dragable.time = false;
                this.dragable.assignment = false;

                if(!this.variable_date)
                {
                    this.variableDate();
                }

                if(_value.indexOf("{{assignment}}") !== -1)
                {   
                    this.dragable.assignment = true;
                }

                if(_value.indexOf("{{time}}") !== -1)
                {   
                    this.dragable.time = true;

                    if(!this.variable_time)
                    {
                        this.variableTime();
                    }
                }

                else
                {
                    this.variable_time = null;
                }
            }   

            else 
            {   
                this.variable_date = null;

                if(_value.indexOf("{{time}}") !== -1)
                {   
                    this.dragable.time = true;
                    this.variable_time = null;
                    this.paragraph = _value.replace("{{time}}","").trim();
                }

                if(_value.indexOf("{{assignment}}") !== -1)
                {   
                    this.dragable.assignment = true;
                    this.paragraph = _value.replace("{{assignment}}","").trim();
                }
            }
        },
    },

Thanks in advance

Answer 1

If you only want one occurrence of {{date}}, you can watch if the paragraph is changing then check if there are duplicates.

For checking the duplicates, I just matched if {{date}} occurs more than once, then it will just get the substring from the very first character, up to the index of the last occurrence of {{date}}.

export default {
  data: () => ({
    paragraph: "lorem ipsum dolor sit amet"
  }),
  watch: {
    paragraph(newVal) {
      const word = "{{date}}";
      const regex = new RegExp(word, "g");

      if ((newVal.match(regex) || []).length > 1) {
        const lastOccurrenceIndex = newVal.lastIndexOf(word);

        // $nextTick() reference: https://vuejsdevelopers.com/2019/01/22/vue-what-is-next-tick/
        this.$nextTick(() => {
          this.paragraph = this.paragraph.substring(0, lastOccurrenceIndex);
        });
      }

    }
  },
}

Here is a sample demo on codesandbox and a quick preview.