Filter und ersetzen verbotenen Wörter Vue js

Question

In diesem Fall wollen wir die Worte in unserem Eingang filtern:

<input type="text" class="form-control" placeholder="Write something..." v-model="todoInput"">

Das sind die verbotenen Wörter sind, die wir von der Eingangs

ersetzen möchten

"verboten", "Apfel", "Banane",

Answer 1

Hier unsere vue Instanz ist. Der Beobachter ersetzt das verbotene Wort (*) an Asterisk

const app = new Vue({ 
 
    el: '#app', 
 
    data: function(){ 
 
    \t return { 
 
    \t \t todoInput : '', 
 
    \t } 
 
    }, 
 
    watch: { 
 
    \t todoInput: function(){ 
 
    \t \t var banned = ["banned", "apple", "banana"] 
 
    \t \t for (var i = 0; i < banned.length; i++) { 
 
    \t \t \t if (this.todoInput.includes(banned[i])) { 
 
\t  \t \t \t this.todoInput = this.todoInput.replace(banned[i], "*".repeat(banned[i].length)) //sets the input to * times the length of the banned word 
 
\t  \t \t } 
 
    \t \t } 
 
    \t } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 

 
<div id="app"> 
 

 
    <input type="text" class="form-control" 
 
      placeholder="Write something..." 
 
      v-model="todoInput"> 
 

 
</div>