# 数据源

<template>
  <j-render
    v-model="model"
    :fields="fields"
    :datasource="datasource"
  ></j-render>
</template>

<script>
import { defineComponent } from 'vue'
import JRender from 'json2render/vue-full'

export default defineComponent({
  components: { JRender },
  setup() {
    return {
      datasource: {
        listdata: { type: 'fetch', url: '/data.json', auto: true },
      },
      model: {
        text: '',
      },
      fields: [
        {
          component: 'p',
          // 属性值是从 model 的 text 里获取，值发生变化显示也发生变化
          text: {
            $type: 'computed',
            $result: 'model.text',
          },
        },
        {
          component: 'input',
          props: {
            placeholder: '请输入',
            // 属性值是从 model 的 text 里获取，值发生变化显示也发生变化
            value: '$:model.text',
            // 事件里将第一个参数里的属性值更新到 model 的 text 属性里
            onInput: '@model.text:arguments[0].target.value',
          },
        },
        {
          component: 'p',
          // 属性值是数据源 listdata 的 data 属性转换成字符串
          text: '$:JSON.stringify(listdata.data)',
          props: { style: 'color: red' },
        },
      ],
    }
  },
})
</script>