0

У меня есть компонент(в этом случае не важно какой, важна суть), в котором что-то записано в template, все по дефолту.

В главной программе (new Vue) так же есть template, где вызывается компонент

template: `<название компонента></название компонента>`

И вот как раз появился вопрос по поводу многократного вызова этого компонента. Например этот компонент, что нужно использовать - это строка в таблице, но заранее не известно сколько будет строчек, так как их количество вводит пользователь.

Такая запись не работает и выдает ошибку, что нельзя создавать мультикомпоненты в template, используя v-for, что-то в этом роде:

new Vue({
  el: '#matrix',
  data: {
    rows: 0
  },
  template: '<testComponent v-for="c in ${this.rows}"></testComponent>',
  methods: {
    inputRows(event) {
      this.rows = event.target.value
    },
  }
})

Можно как-то вызывать template столько раз, сколько нужно или же вызывать компонент столько раз, сколько нужно? Как правильно сделать цикл в данном случае? Где его применить?

3
  • Эм.. А что с v-for?
    – Qwertiy
    16 дек 2019 в 21:08
  • Об этом и спрашиваю, как правильно его записать? new Vue({ el: '#matrix', data: { rows: 0 }, template: '<testComponent v-for="c in ${this.rows}"></testComponent>', methods: { inputRows(event) { this.rows = event.target.value }, } }) 16 дек 2019 в 22:22
  • Такая запись не работает и выдает ошибку, что нельзя создавать мультикомпоненты в template, используя v-for, что-то в этом роде 16 дек 2019 в 22:39

1 ответ 1

0

выдает ошибку, что нельзя создавать мультикомпоненты в template, используя v-for, что-то в этом роде

Нельзя использовать директиву v-for на корневом элементе шаблона.
А вообще в template - использовать можно.

Vue.component('test-component', {
  template: '<div>🙈</div>'
}); 

new Vue({
  el: '#matrix', 
  data: {
    rows: 0
  }, 
  template: `
    <div>
      <input v-model.lazy.number="rows" type="range" min="0" max="50" value="0"> {{ rows }}
      <test-component v-for="c in rows"></test-component>
    </div>
  `
}); 
<div id="matrix"></div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

Если же надо отрисовать несколько компонентов через v-for, то их следует обернуть в HTML-элемент или <template>. Второе - предпочтительнее (документация: v-for и тег template).

3
  • А можете сказать, пожалуйста, зачем тут знак плюса перед rows?
    – Colibri
    16 дек 2019 в 23:52
  • @Colibri, для преобразования строкового значения в числовое. Вместо этого можно использовать v-model.number. Модификатор .number даже лучше, кстати... обновил ответ.
    – yar85
    17 дек 2019 в 0:12
  • Спасибо за информацию
    – Colibri
    17 дек 2019 в 14:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.