帮我看下子组件更细了checklist后父组件的数据为什么渲染不出来<template> <div> <div>封装后的多选框</div> <div> <w-checkbox-group v-model:value="checkedList" :options="plainOptions"> </w-checkbox-group> </div> </div> </template> <script lang="ts"> import WCheckboxGroup from "@/components/w-checkbox-group/checkboxGroup.vue"; import { defineComponent, reactive, toRefs, ref, onUpdated } from "vue"; const plainOptions = [ { label: "Apple", value: "Apple" }, { label: "Pear", value: "Pear" }, { label: "cc", value: "cc" }, ]; export default defineComponent({ components: { WCheckboxGroup, }, setup() { const state = reactive({ indeterminate: true, checkAll: false, checkedList: ["Apple"], }); const onChangeOption = (val: any) => { // const v = val.find((item: any) => !state.checkedList.includes(item)); // state.checkedList = [v]; }; return { ...toRefs(state), plainOptions, onChangeOption, }; }, }); </script>

时间: 2023-06-17 19:08:36 浏览: 59
看起来你的代码中没有使用 `onChangeOption` 方法,所以父组件的数据不会更新。你可以在 `WCheckboxGroup` 子组件中触发 `onChangeOption` 方法来更新父组件的数据。 你可以在 `WCheckboxGroup` 组件中添加一个 `watch` 监听 `value` 的变化,并在变化时触发 `onChangeOption` 方法。修改后的代码如下: ```vue <template> <div> <div v-for="(option, index) in options" :key="index"> <label> <input type="checkbox" v-model="option.checked" :value="option.value" @change="onChange" /> {{ option.label }} </label> </div> </div> </template> <script lang="ts"> import { defineComponent, toRefs, watch } from "vue"; export default defineComponent({ name: "WCheckboxGroup", props: { value: { type: Array, default: () => [], }, options: { type: Array, default: () => [], }, }, setup(props, { emit }) { const onChange = (event: Event) => { const target = event.target as HTMLInputElement; const value = target.value; const checked = target.checked; let newValue = [...props.value]; if (checked) { newValue.push(value); } else { newValue = newValue.filter((item) => item !== value); } emit("update:value", newValue); }; watch(props.value, (newValue) => { emit("changeOption", newValue); }); return { ...toRefs(props), onChange, }; }, }); </script> ``` 然后在父组件中,你可以监听 `WCheckboxGroup` 组件的 `changeOption` 事件,并在事件处理函数中更新 `checkedList` 的值。修改后的代码如下: ```vue <template> <div> <div> <div>封装后的多选框</div> <div> <w-checkbox-group v-model:value="checkedList" :options="plainOptions" @changeOption="onChangeOption" /> </div> </div> </div> </template> <script lang="ts"> import WCheckboxGroup from "@/components/w-checkbox-group/checkboxGroup.vue"; import { defineComponent, reactive, toRefs } from "vue"; const plainOptions = [ { label: "Apple", value: "Apple" }, { label: "Pear", value: "Pear" }, { label: "cc", value: "cc" }, ]; export default defineComponent({ components: { WCheckboxGroup, }, setup() { const state = reactive({ indeterminate: true, checkAll: false, checkedList: ["Apple"], }); const onChangeOption = (val: any) => { state.checkedList = val; }; return { ...toRefs(state), plainOptions, onChangeOption, }; }, }); </script> ``` 这样修改后,当子组件中选项的选中状态发生变化时,父组件的 `checkedList` 数据也会更新,并重新渲染视图。

相关推荐

最新推荐

recommend-type

芯片Design_Review_Checklist

芯片设计3个阶段的checklist 1. design kick-off 2. RTL release 3. Tape out
recommend-type

IC设计工程师必备checklist(英文版)

集成电路、芯片、IC设计或IC验证工程师checklist必备工作清单(英文版)
recommend-type

R16 checklist(原理图部分)_V1_0.pdf

全志 R16 checklist(原理图部分)_V1_0.pdf,R16 硬件设计检查表,版本V1.0,
recommend-type

华为硬件pcb设计checklist.doc

华为硬件pcb设计checklist,包括布局、布线、出加工文件等内容。附录(含规范性要求):元器件间距、布线最小间距、丝印字符大小。
recommend-type

Vue动态生成el-checkbox点击无法赋值的解决方法

最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的 例如: 定义的 data 的 form 里面是空对象,需要动态...
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

MATLAB柱状图在信号处理中的应用:可视化信号特征和频谱分析

![matlab画柱状图](https://img-blog.csdnimg.cn/3f32348f1c9c4481a6f5931993732f97.png) # 1. MATLAB柱状图概述** MATLAB柱状图是一种图形化工具,用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。 柱状图的优点在于其简单易懂,能够直观地展示数据分布。在信号处理中,柱状图可以帮助工程师识别信号中的模式、趋势和异常情况,从而为信号分析和处理提供有价值的见解。 # 2. 柱状图在信号处理中的应用 柱状图在信号处理
recommend-type

get() { return this.photoState },

这是一个 JavaScript 中的方法定义,它定义了一个名为 `get` 的方法。这个方法没有参数,它返回了 `this.photoState`。在这个方法中,`this` 是指当前对象,而 `photoState` 是该对象的一个属性。通常情况下,`get` 方法用于获取对象的属性值,并且可以在获取属性值之前进行一些逻辑操作。
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。