Skip to content

fix: When the label of the form tab is empty, the content is not supported #3950

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shaohuzhang1 merged 1 commit into from
Aug 27, 2025
Merged

fix: When the label of the form tab is empty, the content is not supported #3950

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/src/components/dynamics-form/items/radio/RadioCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
modelValue == item[valueField] ? 'active' : '',
]"
@click="inputDisabled ? () => {} : selected(item[valueField])"
:innerHTML="item[textField]"
:innerHTML="item[textField] ? item[textField] : '\u200D'"
>
</el-card>
</el-col>
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code seems well-formed, but there are a few potential issues to consider:

  1. Null/Undefined Check: The line :innerHTML="item[textField]" should be changed to:

    :innerHTML="item[textField] ? item[textField] : ''">

    This ensures that if item[textField] is null or undefined, it will display an empty string instead of displaying "\u200D" which might not render as intended.

  2. Alternative Null/Undefined Handling: For more robust handling, you could use a ternary operator with multiple conditions:

    .class-name {
    /* Existing styles here */
    font-size: 16px; /* Example addition */
}

  3. Avoid Inline JavaScript: It's generally better to place event listeners outside the template for maintainability. You can define methods in the Vue component like this:

    export default {
  data() {
    return {
      // other data properties
    };
  },
  methods: {
    selected(value) {
      console.log('Selected:', value);
    }
  },
  // ...
};

  4. Ensure Proper Component Structure: Make sure that el-card and el-col have appropriate parents. They typically need a container such as el-row.

These changes will help improve the readability and functionality of your code while ensuring it behaves correctly across different scenarios.

Expand Down
Loading