在Vue.js中如何将reactive数组对象的属性值设置为空？

问题原因 #

你定义的sections是用reactive包裹的数组类型，而非对象类型，数组本身不存在section_title属性，该属性存储在数组的元素对象中，因此直接访问sections.section_title会抛出属性不存在的错误。

解决方法 #

单个元素修改 #

如果你要操作数组中的第一个section对象，需要通过下标定位到对应元素后再修改属性，代码示例如下：

export default {
  name: 'CreateCourse',
  setup(){
      const sections = reactive([{'section_title': '', 'sub_sections': [{'sub_section_title': '', 'imageURL': '' as any, 'url': ''}]}]);

      // 修改第一个section的section_title值
      sections[0].section_title = "";

      // 修改第一个section下第一个sub_section的属性示例
      sections[0].sub_sections[0].sub_section_title = "";
      sections[0].sub_sections[0].imageURL = "";
      sections[0].sub_sections[0].url = "";
    }
}

批量清空属性 #

如果需要同时清空所有section和对应subsection的属性值，可以配合遍历方法实现：

// 批量清空所有相关属性
sections.forEach(section => {
  section.section_title = ''
  section.sub_sections.forEach(sub => {
    sub.sub_section_title = ''
    sub.imageURL = ''
    sub.url = ''
  })
})

可选优化 #

如果你的业务场景中始终只有1个section，可直接将sections定义为对象类型，无需每次通过下标操作：

const sections = reactive({'section_title': '', 'sub_sections': [{'sub_section_title': '', 'imageURL': '' as any, 'url': ''}]});
// 可直接访问对象属性
sections.section_title = ""

内容的提问来源于stack exchange，提问作者etranz