JSFiddle - React, Tailwind, and code Playground

by Andrew Klimov

HTML

<script src="https://unpkg.com/vue"></script>
<div id="vue-object">
  <div v-for="(event, index) in events" v-if="event.enable" :key="event.id" style="min-height: 43px;">
  
    <input
           type="checkbox"
           v-model="event.params.enable"
           :name="event.params.name + '_' + event.params.id"
           :id="event.params.name"
           :value="event.params.id"
           class="filled-in"/>

    <label :for="event.params.name">
      {{ event.params.title }}
    </label>
  <span v-if="event.params.enable">
    <input
           type="tel"
           v-model="event.params.value"
           :name="event.params.name + '_' + event.params.id + '_val'"
           :value="event.value"
           maxlength="3"
           style="width: 70px; text-align: center;"
           >
    баллов
    </span>
</div>

<pre>{{ events }}</pre>
</div>

JavaScript

var events = [
    {
        id: 2,
        external_id: 2,
        params: {
            id: 5,
            name: 'event_2',
            title: 'Чекбокс 2',
            enable: false
        },
        enable: true,
        value: '0'
    },
    {
        id: 99,
        external_id: 1,
        params: {
            id: 7,
            name: 'event_3',
            title: 'Чекбокс 3',
            enable: false
        },
        enable: true,
        value: '0'
    }
];

var vm = new Vue({
    el: '#vue-object',
    data: {
        events: events,
        checkedEvents: [],
        eventValue: [],
        params: {
            events: [],
        }
    },
    methods: {
        
    }
});