onDataChange

• Category: Events
• Relate: onDataChange
• Dependencies: @lark-base-open/js-sdk
• Last Changed: 20 hours ago

Notice

This function needs to use in Base, please use this website as a plugin in a Base to see the demo.

Demo

Source

Show demo code

demo.vue

<script setup lang="ts">
import { ElInput, ElButton } from "element-plus";
import { ref, onMounted } from "vue";
import { onDataChange } from "@qww0302/use-bitable";
import { bitable } from "@lark-base-open/js-sdk";

const value = ref("");
const data = ref<string>();
const key = ref("test");
const changed = ref<string[]>([]);

onDataChange((ev) => {
  changed.value = ev.keys;
  bitable.bridge.getData<string>(key.value).then((res) => {
    data.value = res;
  });
});

const set = () => {
  bitable.bridge.setData(key.value, value.value);
};

onMounted(() => {
  bitable.bridge.getData<string>(key.value).then((res) => {
    data.value = res;
  });
});

</script>

<template>
  <div>
    Data key:
    <ElInput v-model="key" placeholder="Input key to set data"></ElInput>
  </div>
  <div>
    Data value:
    <ElInput v-model="value" placeholder="Input value to set data"></ElInput>
  </div>
  <ElButton @click="set" type="primary">Click to set data</ElButton>
  <div>
    Changed key: {{ changed }}
  </div>
  <div style="margin-top: 20px;">
    Data: {{ data }}
  </div>
</template>

Usage

Type Declarations

import type { DataChangeCtx } from "@lark-base-open/js-sdk"
type DataChangeCallback = (ev: DataChangeCtx) => void
/**
 * listen to data storage change event
 *
 * 监听数据存储变更事件
 *
 * @param fn
 * @returns
 */
export declare function onDataChange(fn: DataChangeCallback): () => void