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

Question

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>

Majed Badawi · Accepted Answer · 2022-06-18 19:03:37Z

1

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>

edited Jun 18, 2022 at 19:03

answered Jun 18, 2022 at 18:53

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suffii Over a year ago

Thanks Majed, this is what I was lookin for, but there is one minor issue here. as you can see the outputs look like 'rome AND london AND rome' but they should be 'rome' AND 'london' AND 'rome'

Majed Badawi Over a year ago

@Suffii you're welcome, check now

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related