wwLib.wwVariable.useComponentVariable issue

Ask us anything How do I?
1

useComponentVariable bug

Hi could u help me fix this issue

<template>
  <div class="my-section">
    <p :style="textStyle">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>

    <button @click="handleFileChange">Upload Files</button>
  </div>
</template>

<script>
import { computed } from "vue";

export default {
  props: {
    uid: { type: String, required: true },
    content: { type: Object, required: true },
  },
  setup(props) {
    const { value: files, setValue: setFiles } =
      wwLib.wwVariable.useComponentVariable({
        uid: props.uid,
        name: "value",
        defaultValue: [],
        type: "file",
      });

    const textStyle = computed(() => ({
      color: props?.content?.textColor,
    }));

    const handleFileChange = () => {
      setFiles(["hello"]);
    };

    return {
      files,
      setFiles,
      textStyle,
      handleFileChange,
    };
  },
};
</script>

<style lang="scss" scoped>
.my-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
  h1 {
    font-size: 32px;
  }
  p {
    margin-top: 12px;
  }
}
</style>

image
image2058×972 368 KB

2

Hi @sihamheddi199

Can you show me your wwConfig file?

3 
export default {
  editor: {
    label: {
      en: "My Section",
    },
  },
  properties: {
    textColor: {
      label: {
        en: "Text color",
      },
      type: "Color",
      defaultValue: "#F23636",
    },
  },
};