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

Question

我试图Form根据另一个名为的反应变量中的数据设置 a 的值Product，但它似乎不起作用。如果数据可用，则应Form将其值设置为数据，如果不可用，则只需使用。Productnull

这是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，为什么这不起作用？

Answer 1

您的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，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);
      }
    }
}