Vue Froala 动态配置选项

Question

我正在使用 Vue Froala 使用 Froala 配置选项进行图像上传，这些选项基本上是添加到 Vue 数据属性的对象。像这样的：

data() {
    return {
        config: {
            imageUploadURL: '/api/image/store',
            imageUploadParam: 'image',
            imageUploadParams: {id: this.id} //this is the dynamic ID
        }
    }
}

当我上传图片并触发这些配置选项时，我尝试传递的 ID 始终是 undefined。我猜这是因为当我第一次加载页面时，Vue 数据属性在一开始就被初始化，而我从 prop 中检索的动态 ID 尚不可用。

我尝试为数据属性 imageUploadParams 分配一个计算属性，该属性将返回 ID 但仍然是 undefined

如果我之后使用观察者分配 ID，我会得到 null。这是我在 POST 代码中得到的 (php)

+request: Symfony\Component\HttpFoundation\ParameterBag {#45
  #parameters: array:1 [
    "id" => null
  ]
}

有什么想法吗？

Answer 1

您可以使用手表：

data() {
  return {
    config: {
      imageUploadURL: '/api/image/store',
      imageUploadParam: 'image',
      imageUploadParams: { id: '' }
    }
  }
},
watch: {
  id(value) {
    this.config.imageUploadParams.id = value;
  }
}

现在每当id 更改时，config.imageUploadParams 就会被设置。

在 JavaScript 中分配变量会在分配时设置值。由于您的 id 在分配时为空，因此没有参考可用于以后访问未来的异步属性。出于同样的原因，分配一个计算值也无济于事。

将watch 用于异步，computed 用于同步是一个很好的一般规则

从聊天中编辑

似乎<froala> 无法响应您的反应数据，并且仅使用初始配置值。在组件上放一个v-if="id"，以防止在id准备好之前创建它：

<froala v-if="id">