En textarea, remplacer deux \ n avec tiret onglet en tapant

Question

Je suis en train de remplacer deux \n\n (donc quand vous appuyez sur Entrée deux fois) avec un onglet intention (\t)

Si j'écris « bla bla bla [enter entrer] bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla

<div id="app"> 
    <textarea v-model="testVal"></textarea> 
</div> 

et vue:

new Vue({ 
    el: '#app', 
    data: { 
    testVal: 'Val' 
    }, 

    watch: { 
    testVal(val) { 
     this.testVal = val.replace(new RegExp('(\n){2,}', 'gim') , "\t");  
    } 
    } 
}) 

Voici un violon que vous pouvez observer la question: https://jsfiddle.net/8gst4mrh/1/

Ce que je veux vraiment réaliser est, lorsque l'utilisateur clique entrer deux fois, le changement à tabuler

Qu'est-ce que je fais mal?

Answer 1

Cela semble être un problème avec la version 1. Vue Your code works as expected using Vue v2.

Si vous devez utiliser cette version de Vue, vous devez écouter explicitement l'événement input et appeler une méthode pour mettre à jour la valeur de testVal:

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    testVal: 'Val' 
 
    }, 
 
    
 
    methods: { 
 
    updateTestVal() { 
 
     this.testVal = this.testVal.replace(new RegExp('(\n){2,}', 'gim') , "\t");  
 
     console.log(this.testVal) 
 
    } 
 
    } 
 
})

textarea { 
 
    width: 500px; 
 
    height: 500px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <textarea v-model="testVal" @input="updateTestVal"></textarea> 
 
</div>