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

Posted 2023-02-22

【中文标题】如果单击复选框，如何获得不同的输出？

【英文标题】：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" 希望有在这种情况下会是类似的方式

【参考方案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，我试试看！