How to Computed Two Results For Two Target Element in Vue.js-CodePudding

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>

CodePudding user response：

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>