CODEWITHSUNDEEP
vue.jsconcatenation
Atousa Darabi
Atousa Darabi

Reputation: 927

How concatenate two filtered values in vue.js?

I need to concatenate two filtered items in vue.js.

<input
  :value="startDate | dateFormat + '-' + endDate | dateFormat"
/>

How could this be possible?

Upvotes: 3

Views: 421

Answers (2)

Thomas Kuhlmann
Thomas Kuhlmann

Reputation: 1003

Alternatively you can stick with using a filter and just provide the two dates as array or object and create the string inside the filter function:

Use as object

<input :value="{ startDate: '2020-10-10', endDate: '2021-01-01' } | dateRange"/>

...

Vue.filter("dateRange", ({ startDate, endDate }) => `${startDate} - ${endDate}`);

Use as array

<input :value="['2020-10-10', '2021-01-01'] | dateRange" />

...

Vue.filter("dateRange", ([startDate, endDate]) => `${startDate} - ${endDate}`);

https://codesandbox.io/s/icy-monad-kdy6j?file=/src/App.vue:0-705

Upvotes: 1

kissu
kissu

Reputation: 46676

This one should work

data() {
  return {
    fullDate: `${this.$options.filters.dateFormat(this.startDate)} - ${this.$options.filters.dateFormat(endDate)}`,
  }
},

or the computed variant as suggested by Alberto (if your data changes, this one will be re-computed, data won't)

computed: {
  fullDate() {
    return `${this.$options.filters.dateFormat(this.startDate)} - ${this.$options.filters.dateFormat(this.endDate)}`
  },
},

Then, finally

<input :value="fullDate" />

Upvotes: 4

Related Questions