Matestack Ui VueJs
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
  • Welcome
  • Migrating to 3.0
  • Back to 2.1 (via Core)
  • Getting started
    • Installation & Update
      • Webpacker Install Steps
      • Importmap Install Steps
      • JSBundling-Rails Install
    • Hello World
  • Built-in Reactivity
    • Emit Client Side Events
      • Onclick Component API
    • Toggle UI States
      • Toggle Component API
    • Call Server Side Actions
      • Action Component API
    • Reactive Forms
      • Overview
      • Form Component API
      • Input Component API
      • Textarea Component API
      • Checkbox Component API
      • Select Component API
      • Radio Component API
      • Nested Forms
    • Partial UI Updates
      • Overview
      • Async Component API
      • Cable Component API
      • Isolated Component API
    • Page Transitions
      • Transition Component API
    • Reactive Collections
      • Overview & API
  • Custom Reactivity
    • Custom Vue.js Components
    • Matestack's Vue.js APIs
    • Third party Vue.js Components
    • Third Party JavaScript
  • Integrations
    • Action Cable
    • Devise
  • Contribute
Powered by GitBook
On this page
  • Parameters
  • key - required
  • options - required
  • disabled_values
  • init
  • placeholder
  • label
  • Custom Radio
  1. Built-in Reactivity
  2. Reactive Forms

Radio Component API

The form_radio component is Vue.js driven child component of the matestack_form component and is used to collect user input.

matestack_form my_form_config do
  form_radio key: :status, options: { 'active': 1, 'deactive': 0 }, #...
end

Parameters

key - required

Defines the key which should be used when posting the form data to the server.

options - required

Can either be an Array or Hash:

Array usage

matestack_form my_form_config do
  form_radio key: :status, options: [0, 1]
end

will render:

<input id="status_0" name="status_0" type="radio" value="0">
<label for="status_0">
0
</label>
<input id="status_1" name="status_1" type="radio" value="1">
<label for="status_1">
1
</label>

Hash usage

matestack_form my_form_config do
  form_select key: :status, options: { 'active': 1, 'deactive': 0 }
end

will render:

<input id="status_1" name="status_active" type="radio" value="1">
<label for="status_1">
  active
</label>
<input id="status_0" name="status_deactive" type="radio" value="0">
<label for="status_0">
  deactive
</label>

The hash values will be used as values for the options, the keys as displayed values.

ActiveRecord Enum Mapping

If you want to use ActiveRecord enums as options for your radio input, you can use the enum class method:

class Conversation < ActiveRecord::Base
  enum status: { active: 0, archived: 1 }
end
matestack_form my_form_config do
  form_radio key: :status, options: Conversation.statuses
end

disabled_values

NOT IMPLEMENTED YET

init

Defines the init value of the radio input. If mapped to an ActiveRecord model, the init value will be derived automatically from the model instance.

Pass in an Integer:

matestack_form my_form_config do
  form_radio key: :status, [1,2,3], init: 1
end

placeholder

Defines the placeholder which will be rendered as first, disabled option.

label

NOT IMPLEMENTED YET

You can also use the label component in order to create a label for this input.

Custom Radio

If you want to create your own radio component, that's easily done since v.1.3.0.

  • Create your own Ruby component:

app/matestack/components/my_form_radio.rb

class Components::MyFormRadio  < Matestack::Ui::VueJs::Components::Form::Radio

  vue_name "my-form-radio"

  # optionally add some data here, which will be accessible within your Vue.js component
  # Make sure to merge your custom data into super. That way you're still able to bootstrap
  # your custom component with the base vue_props
  def vue_props
    super.merge({
      foo: "bar"
    })
  end

  def response
    # exactly one root element is required since this is a Vue.js component template
    div class: "your-custom-markup" do
      render_options
      render_errors
    end
  end

end
  • Create the corresponding Vue.js component:

Generic code:

app/matestack/components/my_form_radio.js

const myFormRadio = {
  mixins: [MatestackUiVueJs.componentMixin, MatestackUiVueJs.formRadioMixin],
  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
  data() {
    return {};
  },
  methods: {
    afterInitialize: function(value){
      // optional: if you need to modify the initial value
      // use this.setValue(xyz) in order to change the value
      // this method can be used in other methods or mounted hook of this component as well!
      this.setValue(xyz)
    }
  },
  mounted: function(){
    // use/initialize any third party library here
    // you can access the default initial value via this.componentConfig["init_value"]
    // if you need to, you can access your own component config data which added
    // within the prepare method of the corresponding Ruby class
    // this.componentConfig["foo"] would be "bar" in this case
  }
}
export default myFormRadio

// and register in your application js file like:
appInstance.component('my-form-radio', myFormRadio) // register at appInstance
  • Don't forget to require and register the custom component JavaScript according to your JS setup!

  • Finally, use it within a matestack_form:

matestack_form some_form_config do
  Components::MyFormRadio.call(key: :foo, options: [1,2,3])
end
PreviousSelect Component APINextNested Forms

Last updated 2 years ago