时间戳

首页 > 解决方案 > Vue Froala 动态配置选项

javascript - Vue Froala 动态配置选项

问题描述

我正在使用 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 数据属性在一开始就被初始化，而我从道具中检索的动态 ID 尚不可用。

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

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

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

任何的想法？

标签： javascriptvue.jsvuejs2vue-componentfroala

解决方案

您可以使用手表：

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

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

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

使用watchfor async 和computedfor sync 是一个很好的一般规则

从聊天编辑

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

<froala v-if="id">

推荐阅读