Vue JS中如何引用嵌套对象Ref的值并设置验证后的单个Plot数据？

先修正你代码里的小笔误：model中的属性应该是plots（和你后续调用的model.plots.value对应），修正后的定义如下：

interface Plot {
  length: number,
  width: number,
  acreage: number
}
const model = {
   plots: ref<Plot[]>([]),
}

下面提供两种满足你需求的实现方式：

方式1：过滤后直接赋值（高效简洁） #

先通过数组filter方法筛选出length、width、acreage均存在（非undefined/null）的项，再直接赋值给ref数组：

// 调用接口获取数据
const fetchedPlots = await yourApiFunction();

// 过滤有效数据
const validPlots = fetchedPlots.filter(plot => 
  plot.length != null && plot.width != null && plot.acreage != null
);

// 赋值给ref数组
model.plots.value = validPlots;

注：!= null等价于!== undefined && !== null，可以简化判断逻辑。

方式2：循环逐个添加（按需处理单条数据） #

如果需要对每条数据做额外处理再添加，可通过循环遍历，满足条件的项才推入ref数组：

const fetchedPlots = await yourApiFunction();

// 可选：清空原有数据（根据业务需求决定是否保留）
model.plots.value = [];

// 循环处理每条plot
for (const plot of fetchedPlots) {
  if (plot.length != null && plot.width != null && plot.acreage != null) {
    // 可在这里对单条plot做额外逻辑处理
    // ...
    
    // 将有效数据推入ref数组
    model.plots.value.push(plot);
  }
}

如果需要单独修改数组中某一条Plot的数据，直接通过索引操作即可（Vue会自动响应数组变化）：

// 修改某条plot的属性
if (model.plots.value[0]) {
  model.plots.value[0].length = 15;
}

// 直接替换整条plot对象
model.plots.value[1] = { length: 20, width: 30, acreage: 600 };

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