0
227
ViewsHow to Computed Two Results For Two Target Element in Vue.js
Can someone please let me know if there is a way to have two result() in Vue computed based on element id?
For example I want return into #and a result which is replaced comma with AND
and an other result for #dash which in this result is replaced with -
new Vue({
el: '#demo',
data() {
return {
target: '',
}
},
computed: {
result() {
//if it is going to #and
// return '`' + this.target.replaceAll(",", "` AND `") + '`' // If {{ result }} is #and
// if it is going to #dash
return '`' + this.target.replaceAll(",", "` - `") + '`' // If {{ result }} is #dash
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p id="and">You Entered {{ result }}</p>
<p id="dash">You Entered {{ result }}</p>
<input v-model="target" placeholder="Enter Your Target" />
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
You can create a function instead:
new Vue({
el: '#demo',
data() { return { target: '' } },
methods: {
getSeperatedInputVal(sep) {
return this.target &&
this.target.split(',').map(str => '`'+ str + '`').join(sep);
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p id="and">You Entered {{ getSeperatedInputVal(" AND ") }}</p>
<p id="dash">You Entered {{ getSeperatedInputVal(" - ") }}</p>
<input v-model="target" placeholder="Enter Your Target" />
</div>
·
Juan Pablo Isaza
Report
Answer question