如何使用来自另一个反应对象（ref）的值设置反应对象（ref）的值？

Question

我正在尝试根据另一个名为 Product 的反应变量中的数据设置 Form 的值，但它似乎不起作用。 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 也是响应式的，为什么这不起作用？

Answer 1

您的Form 仅在setup 首次运行时才被初始化，因此它只是被初始化但不会被更新。如果你想让Form 在Product 更新时更新，你可以让它依赖Product 的computed 属性：

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,
}))

或者你可以手动更新loadProduct中的Form，这样每当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);
      }
    }
}