如何使用另一个反应性对象 (ref) 的值设置反应性对象 (ref) 的值？

我正在尝试设置 a 的值Form基于另一个反应变量中的数据，称为Product但它似乎不起作用。这Form应将其值设置为Product数据如果可用，如果不可用，则使用null.

这是vue组件代码的一部分：

props: {
    ProductID: {
      type: Number,
      default: null
    }
  },

setup (props) {
const Product = ref();

async function loadProduct(ProductID) { // Runs when `props.ProductID` changes using a watcher
      try {
        const Response = await $axios.get(`/api/product/${ProductID}`);
        Product.value = Response.data; // This is an array of data
      } catch (error) {
        console.log(error);
      }
    }
}


 const Form = ref({
      ProductTitle: Array.isArray(Product.value) && Product.value[0].producttitle ? Product.value[0].producttitle : null,
 ProductText: Array.isArray(Product.value) && Product.value[0].producttext ? Product.value[0].producttext : null,
    )}
}

在 vue devtools 中我可以看到Product填充了数据，但这些值从未分配给Form键 - 它们只是空的。如果Product是反应性的，也是如此Form，为什么这不起作用？

Your Form仅在以下情况下才初始化setup是第一次运行，所以它只是初始化但不会更新。如果你想Form更新时间Product更新，你可以做到computed依赖的财产Product:

const Form = computed(() => ({
  ProductTitle: Array.isArray(Product.value) && Product.value[0].producttitle ? Product.value[0].producttitle : null,
  ProductText: Array.isArray(Product.value) && Product.value[0].producttext ? Product.value[0].producttext : null,
}))

或者您可以手动更新Form in loadProduct，这样每当Product已重新加载，Form也将得到更新：

const Form = ref({})
async function loadProduct(ProductID) { // Runs when `props.ProductID` changes using a watcher
      try {
        const Response = await $axios.get(`/api/product/${ProductID}`);
        Product.value = Response.data; // This is an array of data
        Form.value = {
          ProductTitle: Array.isArray(Product.value) && Product.value[0].producttitle ? Product.value[0].producttitle : null,
          ProductText: Array.isArray(Product.value) && Product.value[0].producttext ? Product.value[0].producttext : null,
        }
      } catch (error) {
        console.log(error);
      }
    }
}