如何得到一个不同的输出，如果点击一个复选框?

Question

我在vuetify的复选框工作。我的问题是如何在第二个{{selected.join()}}获得不同的输出。如果我点击"社交媒体"复选框我会在我们的社交媒体上在第一个{{selected.join()}}和我想要一个不同的字符串(在我们的社交媒体页面为例)在第二个。

<v-checkbox
v-model="selected"
label="Social Media"
value="On our social media"
></v-checkbox>
<v-checkbox
v-model="selected"
label="Website"
value="on our website"
></v-checkbox> ```
<script>
selected: [],
</script> 


Output:
{{ selected.join() }}
......
{{ selected.join() }}

Answer 1

两个复选框v-model都绑定到相同的属性selected=比;如果你点击一个复选框，两个都将被更新

另外，将一个复选框绑定到一个数组是很奇怪的，而不是将它们绑定到两个不同的布尔值，然后你可以创建一个计算属性，根据两个布尔值返回你想要的东西:

<template>
<div>
<v-checkbox v-model="checkbox1" label="Social Media"></v-checkbox>
<v-checkbox v-model="checkbox2" label="Website"></v-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checkbox1: false,
checkbox2: false,
};
},
computed: {
myWantedResult() {
const tempArray = [];
this.checkbox1 && tempArray.push('On our social media');
this.checkbox2 && tempArray.push('On our website');
return tempArray.join();
},
},
};
</script>