Как правильно вывести массив

Question

Подскажите как правильно вывести массив ?

<div class="form-group row">
    <label class="col-sm-6 col-form-label required">Цена</label>
        <div class="col-sm-6">
           <input v-mask="'######'" v-model="new_child_name" class="form-control" required>
        </div>
</div>

<script>
        data() {
            return{
                  data: [{
                    name: 'Цена',
                    v-model: 'price',
                    mask: '######',
                    col-sm: '6'
                  }, {
                    name: 'Цена 2',
                    v-model: 'price2',
                    mask: '#',
                    col-sm: '3'
                  }, {
                    name: 'Цена3',
                    v-model: 'price3',
                    mask: '##',
                    col-sm: '3'
                  }],
            }
        },
</script>

Answer 1

Это базовая вещь которая описана в документации. v-for поможет в итерации.

Answer 2

Для рендеринга списка Вам нужна директива v-for:

https://ru.vuejs.org/v2/guide/list.html

Так же почитайте про работу с классами: https://ru.vuejs.org/v2/guide/class-and-style.html

И реактивность: https://ru.vuejs.org/v2/guide/reactivity.html

<div id="app">
    <div class="form-group row" v-for="(item, index) in data">
        <label :class="`col-sm-${item.cols}`" class="col-form-label required">Цена</label>
        <div :class="`col-sm-${item.cols}`">
            <input v-mask="'######'" v-model="prices[index]" class="form-control" required>
        </div>
    </div>
    Цены: {{prices}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',

    data: function () {
      return {
        prices: ['', '', ''],
        data: [
          {
            name: 'Цена',
            mask: '######',
            cols: '6'
          },
          {
            name: 'Цена 2',
            mask: '#',
            cols: '3'
          },
          {
            name: 'Цена3',
            mask: '##',
            cols: '3'
          }
        ],
      }
    }
  });
</script>

БЛОГ НА HUSL

Как правильно вывести массив

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