CODEWITHSUNDEEP
javascriptvue.js
Suffii
Suffii

Reputation: 5784

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

enter image description here

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>

Upvotes: 1

Views: 78

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28414

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>

Upvotes: 1

Related Questions