Vue: Switch between result arrays with checkbox - vue.js

Question

I have a computed property that brings back the data "V" into a select dropdown and splits it at the commas and sorts it. All is well.
I also have a check box that allows the user to display records where the date has passed. This info is shown by selecting a checkbox. That works okay too.
So what I'm trying to do is switch between two different functions depending on whether the checkbox is checked.
So what I'd like to say (although the syntax is incorrect) is this:
if (checkboxX === true) const metaVFees = this.resultfilteredResults
else (checkboxX === false) const metaVFees = this.results
and work it into this computed property. Can anyone help with this please?
uniqueSubjects() {
const metaVFees = this.resultfilteredResults // <--- This should switch
.filter((result) => result.metaData && result.metaData.V)
.map((item) => item.metaData.V)
.filter((subject, i, arr) => arr.indexOf(subject) === i);
// Split multiple subjects in strings and store in an array
let subjects = [];
metaVFees.forEach((item) => {
const splitArr = item.split(", ");
subjects = subjects.concat(splitArr);
});
return subjects
.sort()
.filter((subjects, i, arr) => arr.indexOf(subjects) === i);
},

Answer 1

There's several ways to address this, but the easiest is probably JavaScript's Conditional (Ternary) Operator:
[conditional] ? [expression if true] : [expression if false]
It would look like this in your case:
this.metaVFees ? this.resultfilteredResults : this.results
This statement says that if this.metaVFees is true, "execute" this.resultfilteredResults, and if false, then this.results (I say execute because you can use full statements/ expressions with this operator, but we only need single values here).
We can drop the ternary expression straight into your computed property
(I like the parenthesis for clarity, but they aren't actually required since there's a line break after it here):
...
const metaVFees = (this.metaVFees ? this.resultfilteredResults : this.results)
.filter((result) => result.metaData && result.metaData.V)
.map((item) => item.metaData.V)
.filter((subject, i, arr) => arr.indexOf(subject) === i);
...
And here's a short snippet showing this kind of expression in action:
new Vue({
el: '#app',
data() { return {
flag: false,
values1: [1, 2, 3, 4, 5],
values2: [6, 7, 8, 9, 10],
}},
computed: {
ternaryComputed() {
return this.flag ? this.values1 : this.values2
.filter(num => num % 2 == 0); // Filter out odd numbers
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div>{{ `Computed: ${ternaryComputed}` }}</div><br>
<button #click="flag = !flag">Swap Array</button><br><br>
<div>{{`(this.flag ? this.values1 : this.values2) = [${(this.flag ? this.values1 : this.values2)}]`}}</div>
</div>