Дочерний компонент Vue.js отправляет данные в родительский объект

Question

В настоящее время я пытаюсь поместить данные дочернего компонента $emit в объект родительского объекта, а родительский объект включается в массив, который создается и добавляется при нажатии кнопки.

oneитерация кнопки создания компонента

нажатие на кнопку дважды, добавляет еще 2 объекта в массив

У меня нетпонять, как я могу добавлять цифры в сумму через реквизиты и выбрасывать при создании новых компонентов.

Новое в Vue, извините, если это не лучшее описание

массив объектов

каждый объект в области имеет бюджет, уникальный, оставшийся, входной бюджет на сумму

Родительский компонент

<div class="budgetItemContainer">
        <div class="budgetItemRow">
            <!--component being created via button click-->
            <div v-for="(input, index) in budgetRows" :key="index">

            <!--<component :is="$options.components.budgetItemRowContent" v-bind="budgetRows"></component>-->
                <budgetItemRowContent v-bind:="budgetRows" ></budgetItemRowContent>
            <progress data-min="0" data-max="100" data-value="20"></progress>
            </div>
        </div>
    </div>

export default {
name: 'budgetGroup',
components: {
    budgetItemRowContent,
    BudgetItemButton,
},
data: () => {
    return {
        budgetItemHeading: 'Housing',
        budgetRows: [
            {
                inputbudget: '',
                amountbudgeted: 0,
                remaining: 0,
                id: uniqId(),
            },
        ],
    };
},
methods: {
    //creates new budgetRow when button is clicked
    createNewContent() {
        this.budgetRows.push({inputbudget: '', amountbudgeted: 0, remaining: 0, id: uniqId() });
    },
},
}


Child Component

 <!--input that will hopefully update amoundbudgeted in parent object-->


       <div class="budgetItemRow-Column">
        <div class="budgetItemLabel">
            <input v-model="blabel" type="text" maxlength="32" placeholder="Label" class="input-Budget-Inline-Small budgetItemRow-Input">
        </div>
    </div>

    <!--input that will hopefully update amoundbudgeted in parent object-->
    <div class="budgetItemRow-Column">
        <div class="amountBudgetedInputContainer">
            <input v-model.number="amount" class="amountBudgetedNumber budgetItemRow-Input input-Budget-Inline-Small" type="number" placeholder="$">
        </div>
    </div>

     export default {
    props: ['value', 'label'],
    computed: {
        amount: {
            set(newVal) {
                this.$emit('input', newVal);
            },
            get() {
                return this.value;
            },
        },
        blabel : {
            set(newLab) {
                this.$emit('labels', newLab);
            },
            get() {
                return this.label;
            }
        }
    },
};

Answer 1

Если вас интересует только amountBudgeted, то вот как вы бы выложили свой код.

Сначала преобразуйте строку компонента в следующее:

//<component :is="$options.components.budgetItemRowContent" v-bind="budgetRows"></component>
<budgetItemRowContent v-model="budgetRows[index].amountBudgeted"></budgetItemRowContent>

Это в основномпросто делает ваш код чище и читабельнее.Обратите внимание, что я также прикрепил v-model к компоненту, это в основном то же самое, что а) пропуск value проп и б) наблюдение за событием input с последующим обновлением привязки (в данном случае budgetRows[index].amountBudgeted) с полезной нагрузкой события.

Затем измените ваш дочерний компонент следующим образом:

...
<input v-model.number="amount" ...
...

<script>
export default {
  // Name isn't 100% necessary here as it's inferred from the parent scope
  props: ['value'], //Implicitly passed from parent
  computed: {
    amount: {
      set(newVal){
        this.$emit('input', newVal)
      },
      get(){
        return this.value
      },
    },
  }
}
</script>

Это должно привести вас на правильный путь, дайте мне знать, если у вас есть какие-либовопросы.