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

我尝试分配数据属性 imageUploadParams 计算属性将 return 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">

Vue Froala 动态配置选项

Vue Froala dynamic config options

javascript

froala

vue.js

vue-component

vuejs2