Блог

В настоящее время я внедряю простой конструктор контента с vuetify v-textarea. Я хотел удалить некоторую дублирующуюся строку, например. «{{дата}}», если она уже существует, из поля с vuetify v-textarea. Я предоставляю фрагмент кода ниже;

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

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

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

это фактический код из моей текущей проблемы

ШАБЛОН

         <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>
  

СКРИПТ

     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();
                }
            }
        },
    },
  

Заранее спасибо

Если вам нужно только одно вхождение {{date}} , вы можете посмотреть, меняется ли абзац, а затем проверить, есть ли дубликаты.

Для проверки дубликатов я просто сопоставил, если {{date}} встречается более одного раза, тогда он просто получит подстроку от самого первого символа до индекса последнего появления {{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);
        });
      }

    }
  },
}
  

Вот пример демо на codesandbox и краткий предварительный просмотр.