如果单击复选框，如何获得不同的输出？答案

【问题标题】：How to get a different output if clicking on a checkbox?如果单击复选框，如何获得不同的输出？
【发布时间】：2021-04-25 19:03:00
【问题描述】：

我正在处理 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() }}

【问题讨论】：

为什么不对 v-model 使用两个不同的变量？
复选框由 6 个选项组成，这样我就解决了最初使用 Arrays 时遇到的问题。我对具有值的单选按钮（虽然没有数组）做了同样的事情： {'var1': "auf unseren Social-Media-Kanälen", 'var2': "auf unseren Social-Media-Kanälen aufgenommen werden"}} 希望有在这种情况下会是类似的方式

标签： javascript arrays vue.js checkbox vuetify.js

【解决方案1】：

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

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

<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>

【讨论】：

ty，我试试看！