vuejs зацикливается на массиве объектов как реквизит реквизита неправильно по сравнению с жестким кодированием как данных

Question

Когда я пытаюсь передать массив объектов моему компоненту в качестве опоры ...

[{"prize":"first","abbr":"1st Prize","value":"50"},{"prize":"second","abbr":"2nd Prize","value":"30"},{"prize":"third","abbr":"3rd Prize","value":"20"}]

... Я не получаю 3 ожидаемых столбца, но получаю более 100,и мне не хватает моего заполнителя и атрибута данных в текстовом поле.

export default {
    props: ['settings', 'colour', 'draw_type'],
    data: function() {
        return {
            prizes: {
                first: {
                    name: '',
                    telephone: ''
                },
                second: {
                    name: '',
                    telephone: ''
                },
                third: {
                    name: '',
                    telephone: ''
                },
                fourth: {
                    name: '',
                    telephone: ''
                }
            }
        }
    },
    ...
    ...

Как я могу исправить свой код, чтобы я мог передать заданный массив объектов как объект и по-прежнему правильно его отображать?

Когда я жестко кодирую settings, таблица отображается правильно:

<template>
    <form @submit.prevent="submit" class="mb-5">
        <div class="row">
            <div class="col-md-3" v-for="(setting, index) in settings">
                <p>{{setting.abbr}}</p>
                <div class="card">
                    <div :class="colour">
                       <div class="box">
                            {{ setting.prize }}
                        </div>
                    </div>
                    <div class="card-body text-center">
                        <h5 class="card-title">&pound;{{ setting.value }}</h5>
                        <div class="form-group">
                            <input type="text" class="form-control" :placeholder="setting.abbr" maxlength="2" :data-prize="setting.prize" v-model="setting.prize">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-striped">
            <tr>
                <th>Prize</th>
                <th>Number</th>
                <th>Name</th>
                <th>Telephone</th>
            </tr>
            <tr v-for="(setting, index) in settings">
                <td>&pound;{{ setting.value }}</td>
                <td>{{ setting.prize }}</td>
                <td>{{ prizes[setting.prize].name }}</td>
                <td>{{ prizes[setting.prize].telephone }}</td>
            </tr>
        </table>
        <div class="form-group row">
            <div class="col-sm-8">
                <button type="submit" class="btn btn-primary">
                    Save Results
                </button>
            </div>
        </div>
    </form>
</template>
<script>

export default {
    props: ['colour', 'draw_type'],
    data: function() {
        return {
            settings: [
                {
                    "prize":"first",
                    "abbr":"1st Prize",
                    "value":"50"
                },
                {
                    "prize":"second",
                    "abbr":"2nd Prize",
                    "value":"30"
                },
                {
                    "prize":"third",
                    "abbr":"3rd Prize",
                    "value":"20"
                }
            ],
            prizes: {
                first: {
                    name: '',
                    telephone: ''
                },
                second: {
                    name: '',
                    telephone: ''
                },
                third: {
                    name: '',
                    telephone: ''
                },
                fourth: {
                    name: '',
                    telephone: ''
                }
            }
        }
    },
    mounted() {
        console.log(this.settings);
    }
};
</script>

Answer 1

Добавить ключ на элемент v-for, может быть, ваша проблема

<tr v-for="(setting, index) in settings" :key="index">
   <td>&pound;{{ setting.value }}</td>
   <td>{{ setting.prize }}</td>
   <td>{{ prizes[setting.prize].name }}</td>
   <td>{{ prizes[setting.prize].telephone }}</td>
</tr>

Answer 2

По умолчанию реквизиты являются строковыми типами, поэтому при передаче массива объектов он будет интерпретироваться как строка. v-for выполняет итерацию строки в виде массива символов, который может объяснить 100+ элементов без ожидаемых свойств.

типы пропелетов должны быть установлены следующим образом:

export default {
  props: {
    settings: {
      type: Array,
      default: () => []
    },
    colour: String,
    draw_type: String
  },
}

Vue.component('prizes', {
  template: `<table class="table table-striped">
            <tr>
                <th>Prize</th>
                <th>Number</th>
                <th>Name</th>
                <th>Telephone</th>
            </tr>
            <tr v-for="(setting, index) in settings">
                <td>&pound;{{ setting.value }}</td>
                <td>{{ setting.prize }}</td>
                <td>{{ prizes[setting.prize].name }}</td>
                <td>{{ prizes[setting.prize].telephone }}</td>
            </tr>
        </table>`,
  props: {
    settings: {
      type: Array,
      default: () => []
    },
    colour: String,
    draw_type: String
  },
  data() {
    return {
      prizes: {
        first: {
          name: 'jack',
          telephone: '(555) 111-1111',
        },
        second: {
          name: 'jill',
          telephone: '(555) 222-2222',
        },
        third: {
          name: 'james',
          telephone: '(555) 333-3333',
        },
        fourth: {
          name: 'jane',
          telephone: '(555) 444-4444',
        }
      }
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    settings: [
      {
        prize: 'first',
        abbr: '1st Prize',
        value : 50
      },
      {
        prize: 'second',
        abbr: '2nd Prize',
        value: 30
      },
      {
        prize: 'third',
        abbr: '3rd Prize',
        value: 20
      }
    ]
  }),
})

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <prizes :settings="settings"></prizes>
</div>