uni-app中制作动态radio组件无法读取初始化值

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app中制作动态radio组件无法读取初始化值

代码示例

模板部分

<template>
  <view>
    <form @submit.prevent="handleSubmit">
      <view class="item">
        <label>业态</label>
        <radio-group v-model="formData[eField]">
          <label class="radio-label" v-for="(option, index) in options" :key="index">
            <radio :value="(index + 1).toString()">{{ option }}</radio>
          </label>
        </radio-group>
      </view>
      <button type="submit">提交</button>
    </form>
    <view>当前选择：{{ formData[eField] }}</view>
  </view>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      fieldsToDisplay: [
        {
          "DP": 0,
          "DataType": "int",
          "FL": 4,
          "cField": "业态",
          "eField": "nlog01",
          "fldType": "3,商场,客户,供货商",
          "model": 3
        }
      ],
      formData: { "nlog01": 2 },
      options: [],
      eField: "nlog01" // 直接在这里定义
    };
  },
  created() {
    this.initializeOptions();
    console.log('初始化的选项：', this.options);
    console.log('初始化的表单数据：', this.formData);
  },
  methods: {
    initializeOptions() {
      const fieldInfo = this.fieldsToDisplay[0];
      if (fieldInfo.fldType) {
        this.options = fieldInfo.fldType.split(',').slice(1);
      }
    },
    handleSubmit() {
      console.log('提交的数据：', this.formData);
    }
  }
};
</script>

样式部分

.item {
  margin-bottom: 20px;
}
.radio-label {
  display: block;
}

Harmonyos Next教程
1 回复

在uni-app中制作一个动态生成的radio组件，并确保它能够正确读取初始化值，通常涉及以下几个步骤：数据绑定、组件动态渲染以及组件值的管理。下面是一个简单的代码示例，展示如何实现这一点。

1. 数据准备

首先，在你的页面的data中定义用于存储radio选项和选中值的变量：

data() {
    return {
        radioOptions: [
            { value: 'option1', text: 'Option 1' },
            { value: 'option2', text: 'Option 2' },
            { value: 'option3', text: 'Option 3' }
        ],
        selectedValue: 'option2' // 初始化选中值
    };
}

2. 动态渲染Radio组件

在模板中使用v-for指令动态渲染radio组件，并绑定v-model到selectedValue：

<template>
    <view>
        <radio-group @change="onRadioChange">
            <label v-for="(option, index) in radioOptions" :key="index">
                <radio :value="option.value" :checked="option.value === selectedValue">{{ option.text }}</radio>
            </label>
        </radio-group>
    </view>
</template>

3. 处理Radio组变化

定义一个方法来处理radio组的变化，虽然在这个例子中我们主要是为了展示如何读取初始化值，但处理变化的方法也是必要的：

methods: {
    onRadioChange(event) {
        this.selectedValue = event.detail.value;
        console.log('Selected Value:', this.selectedValue);
    }
}

4. 完整示例

将上述部分整合到一起，你的页面代码可能如下所示：

<template>
    <view>
        <radio-group @change="onRadioChange">
            <label v-for="(option, index) in radioOptions" :key="index">
                <radio :value="option.value" :checked="option.value === selectedValue">{{ option.text }}</radio>
            </label>
        </radio-group>
    </view>
</template>

<script>
export default {
    data() {
        return {
            radioOptions: [
                { value: 'option1', text: 'Option 1' },
                { value: 'option2', text: 'Option 2' },
                { value: 'option3', text: 'Option 3' }
            ],
            selectedValue: 'option2' // 初始化选中值
        };
    },
    methods: {
        onRadioChange(event) {
            this.selectedValue = event.detail.value;
            console.log('Selected Value:', this.selectedValue);
        }
    }
};
</script>

这个示例展示了如何在uni-app中动态生成radio组件，并正确读取和设置初始化值。通过绑定v-model到selectedValue，以及使用:checked属性来比较当前选项的值与选中值，确保了radio组件能够正确反映初始化状态。

回到顶部