Как заставить работать v-model?

Question

Создаю таблицу чекбоксов

buildTableCheckbox() {
                let checked = this.schedule.limitSchedule.split('');
                let days = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'];
                let createHeader = document.querySelector(".create-header");
                let createBody = document.querySelector('.create-body');
                let timetableCount = 0;
                createHeader.innerHTML = '<th></th>';
                for(let i=0; i<24; i++) {
                    let th = document.createElement('th');

                    th.innerText = i;
                    th.scope = 'col';
                    createHeader.appendChild(th);
                }

                for(let key in days) {
                    let tr = document.createElement('tr');
                    tr.innerHTML = '<th><a href="javascript:" class="js-timetable-day" data-day="' + key + '">' + days[key] + '</a></th>';
                    createBody.appendChild(tr);
                    for (let i = 0; i < 24; i++) {
                        let isChecked = '';
                        if (checked[timetableCount] === '1') {
                            isChecked = 'checked="checked"';
                        }
                        tr.innerHTML += '<td><input class="filled-in" type="checkbox" v-model="timetable" name="timetable['+ timetableCount + ']" value="1" id="timetable[' + timetableCount + ']" ' + isChecked + '><label for="timetable[' + timetableCount + ']"></label></td>';
                        timetableCount++
                    }
                }
            }

в строке

tr.innerHTML += '<td><input class="filled-in" type="checkbox" v-model="timetable" name="timetable['+ timetableCount + ']" value="1" id="timetable[' + timetableCount + ']" ' + isChecked + '><label for="timetable[' + timetableCount + ']"></label></td>';

пытаюсь подключить v-model но я так понимаю vue не рендерит подобное, подскажите как обойти данную проблему и записать данные для отправки на сервер

Answer 1

созданную HTML-разметку нужно скомпилировать во Vue.

import Vue from 'vue';
Vue.compile(/*Ваша HTML-разметка*/);

Answer 2

Vue.component('my-form', {
  template: `<form>
    <table @change="$emit('change', newData)">
      <tbody>
        <tr v-for="row in rowsCount">
          <th>{{ daysOfWeek[(row - 1) % 7] }}</th>
          <td v-for="idx in 24" :key="(row - 1) * 24 + idx - 1">
            <input v-model="newData[(row - 1) * 24 + idx - 1]" type="checkbox">
          </td>
        <tr>
      </tbody>
    </table>
  </form>`,
  props: {
    data: { type: Array, default: () => [] },
  },
  data() { return {
    daysOfWeek: Object.freeze('пн,вт,ср,чт,пт,сб,вс'.split(',')),
    newData: [],
  }},
  computed: {
    rowsCount() {
      return Math.ceil(this.data.length / 24);
    },
  },
  mounted() {
    this.newData = [...this.data];
  },
});

new Vue({
  el: '#app',
  data() { return {
    input: '110000000000000000000000010000000000000000000000001000000000000000000000000100100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
  }},
  methods: {
    log(arr) {
      console.clear();
      console.log(arr.map(v => +v).join(''));
    },
  },
  computed: {
    parsed() {
      return this.input.split('').map(v => v === '1');
    },
  },
})

table { border-collapse: collapse; margin-bottom: 2rem; font-family: sans-serif; }
tr:nth-child(odd) { background: #eee; }
th, td { min-width: 2rem; padding: 0.3em 0; }
th { padding-right: 0.5em; }

<div id="app">
  <my-form :data="parsed" action="#" @change="log"></my-form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

БЛОГ НА HUSL

Как заставить работать v-model?

Ответы (2 шт):