<div style="padding: 6px"> <el-checkbox label="选项一头"></el-checkbox> </div> <div style="padding: 6px"> <el-checkbox label="选项三尾"></el-checkbox> </div> 如何使用多个单一checkbox，而不是使用checkbox-group来更新一个列表的值

您可以使用多个单一的checkbox，每个checkbox都有自己的v-model来更新对应的值。例如：

<template>
  <div>
    <div style="padding: 6px">
      <el-checkbox v-model="options.one">选项一头</el-checkbox>
    </div>
    <div style="padding: 6px">
      <el-checkbox v-model="options.two">选项二</el-checkbox>
    </div>
    <div style="padding: 6px">
      <el-checkbox v-model="options.three">选项三尾</el-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        one: false,
        two: false,
        three: false
      }
    };
  }
};
</script>

这样每个checkbox都会更新对应的options中的值。

相关问题

<!-- 优惠券列表 --> <div style="border:1px solid #FFF;position:relative"> <div class="couponList" v-show="couponFlag"> <el-checkbox-group v-model="checkList" @change="ChooseCouponList"> <div class="coupon-box grid" v-for="item in AccountCouponList" :key="item.id"> <div class="coupon-item-l grid flex_items grid_column flex_center"> <div style="color:#EB3434;font-size:26px;">￥<span style="font-size:56px">{{item.payDiscountValue}}</span></div> <div style="margin-top:10px;font-size:26px">满{{item.payThreshold}}可用</div> </div> <div class="coupon-item-r"> <div class="grid" style="height: 100%;"> <div class="u-2of3" style="height:100%"> <!-- <div style="font-weight:700;padding-left:40px;margin-bottom:15px">{{item.couponName}}</div> --> <div>1111111111</div> <div style="padding-left:40px;font-size:26px">有效期{{(item.expireTime).slice(0, 10)}}</div> </div> <div class="u-1of3" style="height: 100%;;text-align:center"> <!-- <el-checkbox class="custom-checkbox" :label="item.id"></el-checkbox> --> <!-- <img v-if="SelectRadio === index" src="../../assets/gouxuan_youhuiquan.png" alt="勾选"> <img v-else src="../../assets/gouxuan_youhuiquan_n.png" alt="未勾选"> --> </div> </div> </div> </div> </el-checkbox-group> </div> </div> 这段代码写法有没问题, 1111111111div容器的字段,在页面上显示不出来

根据你提供的代码，没有明显的语法错误。不过，有几个可能导致 `<div>1111111111</div>` 不显示的原因：

1. CSS 样式问题：请确保这个 `<div>` 元素的父元素或者其他相关元素没有设置了隐藏、透明度为 0、或者其他可能导致该元素不可见的 CSS 样式。

2. 数据问题：请检查 `AccountCouponList` 数组中的数据是否存在，并且确保 `item.couponName` 的值不为空。如果 `item.couponName` 是空的，那么 `<div>1111111111</div>` 中就不会显示任何内容。

3. 其他代码问题：请检查其他与该元素相关的代码，特别是可能会影响该元素显示的条件语句、指令、事件处理等。

如果以上检查都没有找到问题，你可以尝试在浏览器开发者工具中查看该元素是否存在，并检查是否有其他样式或错误信息影响了其显示。另外，你还可以尝试将该元素放置在其他位置或者与其他元素进行比较，看是否有不同的显示效果。

<el-checkbox-group v-model="field_display_ui" @change="handleFieldDisplayChange"> <el-checkbox v-for="(field,value) in fields_dict" :value="field" :label="value" style="display: block;padding: 6px"> </el-checkbox> <el-checkbox label="选项一头" value="b" style="display: block;padding: 6px"></el-checkbox> </el-checkbox-group> 这是一段子组件中的代码，field_display_ui 和 fields_dict 为父组件中传过来的变量，如何使field_display_ui的改变能即时同步到父组件中

你可以通过 $emit 方法来实现子组件向父组件传递数据。在子组件中，你可以监听 field_display_ui 变量的改变，一旦发生改变，就通过 $emit 方法把新的值传递给父组件。具体实现如下：

在子组件中：

<el-checkbox-group v-model="field_display_ui" @change="handleFieldDisplayChange">
    <el-checkbox
      v-for="(field,value) in fields_dict"
      :value="field"
      :label="value"
      style="display: block;padding: 6px">
    </el-checkbox>
    <el-checkbox label="选项一头" value="b" style="display: block;padding: 6px"></el-checkbox>
</el-checkbox-group>

<script>
  export default {
    props: {
      field_display_ui: {
        type: Array
      },
      fields_dict: {
        type: Object
      }
    },
    methods: {
      handleFieldDisplayChange() {
        this.$emit('update:field_display_ui', this.field_display_ui);
      }
    }
  }
</script>

在父组件中：

<template>
  <div>
    <child-component :field_display_ui.sync="field_display_ui" :fields_dict="fields_dict"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        field_display_ui: [],
        fields_dict: {}
      }
    }
  }
</script>

这里使用了 .sync 修饰符，使得父组件中的 field_display_ui 变量可以被子组件双向绑定。这样一来，当子组件中的 field_display_ui 发生改变时，父组件中的变量也会实时更新。