VstFilterRadio

Компонент розроблено для представлення групи радіокнопок у користувацькому інтерфейсі. Він дозволяє користувачеві вибрати один варіант із списку доступних опцій.

Component API

Behaviour

Name	Description	Type
value	Значення вибраної радіокнопки.	String
id	Обов'язковий унікальний ідентифікатор фільтру	String

Content

Name	Description	Type
options	Масив об'єктів або стрінгових значень. Допустимими ключами об'єкту є: id, text або сама опція, що будуть значеннями для v-model, та text або сама опція, яка піде текстом у опції	Array

Events

Name	Description	Return value
@input	Івент зміни значення компонента	String

Приклад

Нижче наведено базове використання компоненти, де задано пропси id, placeholder, options. label - назва випадаючого акордеону, type - ключ, який визначає, який фільтр виводити.

Приклад пропсу scheme

Details

export default {
  data() {
    return {
      filter: [
        {
          id: "id5",
          type: "radio",
          label: "Choose text",
          placeholder: "Placeholder test",
          options: [
            {
              id: "1",
              text: "Flying to the moon",
            },
            {
              id: "2",
              text: "The small prince",
            },
          ],
        },
      ],
    };
  },
};

Приклад компоненту

   <template>
      <div>
        <code v-if="filterState" style="white-space: break-spaces;" class="mb-2 vsTailwind block">{{filterState}}</code>
        <VsFilter name="radio" :scheme="filter" @change="filterState = $event"></VsFilter>
      </div>
   </template>
   <script>
    export default {
      data() {
        return {
          filterState: null,
          filter: [
            {
              id: "id5",
              type: "radio",
              label: "Choose text",
              placeholder: "Placeholder test",
              options: [
                {
                  id: "1",
                  text: "Flying to the moon",
                },
                {
                  id: "2",
                  text: "The small prince",
                },
              ],
            },
          ],
        };
      },
    };
   </script>