Aktualisieren eines Werts, wenn sich das V-Modell ändert

Ich habe eine Texteingabe mit v-model, die den Wert an data bindet. Ich möchte auch meine parse() Funktion aufrufen können, wenn dieser v-model Wert ändert, um ein Array zu aktualisieren, das sich auch auf data befindet.Aktualisieren eines Werts, wenn sich das V-Modell ändert

<div id="app"> 
    <input 
     id="user-input" 
     type="text" 
     v-model="userInput"> 

    <ul id="parsed-list"> 
     <li v-for="item in parsedInput"> 
      {{ item }} 
     </li> 
    </ul> 
</div> 

new Vue({ 
    el: '#app', 
    data: { 
    userInput: '', 
    parsedInput: [] 
    } 
}) 

let parse = input => { 
    return input.split(',') 
}

Wie soll ich den v-Modellwechsel mit gehe über data.parsedInput mit der parse() Funktion zu aktualisieren? Was ist der richtige Weg, dies zu tun?

Quelle

2017-12-18 user9993

Eine richtige Vue über eine Dateneigenschaft, die von einem anderen abhängt ist mit einem computed property, auf diese Weise parsedInput wird automatisch aktualisiert, sobald userInput Änderungen:

let parse = input => { 
 
    return input.split(',') 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    userInput: '', 
 
    }, 
 
    computed: { 
 
    parsedInput() { 
 
     return parse(this.userInput) 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script> 
 
<body> 
 
    <div id="app"> 
 
    <input id="user-input" type="text" v-model="userInput"> 
 

 
    <ul id="parsed-list"> 
 
     <li v-for="item in parsedInput"> 
 
     {{ item }} 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

Als Nebenbemerkung: die erklären parse Funktion vor der Verwendung, um is not defined Fehler zu verhindern.

Quelle

2017-12-18 13:04:49 yuriy636

Aktualisieren eines Werts, wenn sich das V-Modell ändert

Antwort

Verwandte Themen