Question

当您在同一子组件中有两个输入时，我一直在努力解决v模型的工作方式问题。我要从父组件传入对象数组，并且需要使用两个输入字段更新对象数组中对象的不同部分。我可以让一个输入字段起作用，但不知道如何让两个输入都影响对象（位于数组中）的不同项。我是Vue的新手，并不完全了解传递对象数组并影响这些对象中的特定项目的功能。

Parent Component
<template>
<div class="budgetGroup">
    <header><input title="CardTitle" type="text" v-bind:placeholder="budgetItemHeading"></header>
    <div class="budgetItemContainer">
        <div class="budgetItemRow">
            <!--creates new component when click event happens and places below-->
            <div v-for="(input, index) in budgetRows" :key="index">
                <budgetItemRowContent v-model="budgetRows"></budgetItemRowContent>
            <progress data-min="0" data-max="100" data-value="20"></progress>
            </div>
        </div>
    </div>
    <footer class="budgetGroupFooter">
        <div class="budgetGroupFooter-Content budgetGroupFooter-Content--Narrow">
            <button class="addBudgetItem" id="addBudgetItem" v-on:click="createNewContent()">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
                    <path fill="#FD0EBF" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"></path>
                </svg>
                Add Item
            </button>
        </div>
    </footer>
</div>

export default {
name: 'budgetGroup',
components: {
    budgetItemRowContent,
    BudgetItemButton,
},
data: () => {
    return {
        budgetItemHeading: 'Housing',
        // creates array containing object for budget row information
        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() });
    },
},
};

子组件-需要两个输入来影响对象中的不同项目

<template>
<div class="budgetItemRowContent">

    <div class="budgetItemRow-Column">
        <div class="budgetItemLabel">
//Input that is suppose to update InputBudget in object
            <input type="text" maxlength="32" placeholder="Label" class="input-Budget-Inline-Small budgetItemRow-Input">
        </div>
    </div>

    <!--input that will update amoundbudgeted -->
    <div class="budgetItemRow-Column">
        <div class="amountBudgetedInputContainer">
//Input that will be updating amountBudgeted in object
            <input v-model.number="amount" class="amountBudgetedNumber budgetItemRow-Input input-Budget-Inline-Small" type="number" placeholder="$">
        </div>
    </div>
    <div class="budgetItemRow-Column">
        <span class="budgetItemSecondColumnMoney-Spent">
            <span class="money-symbol">$</span>
            <span class="money-integer"></span>
            <!--<span class="money-decimal">.</span>-->
            <!--<span class="money-fractional">04</span>-->
        </span>
    </div>
</div>

<script>
export default {
//only one prop that is being updated(dont know how to have two seperate items in object to get updated
    props: ['value'],
    computed: {
        amount: {
            set(newVal) {
                this.$emit('input', newVal);
            },
            get() {
                return this.value;
            },
        },
    },
};

在子组件中具有两个文本输入的V模型

0 个答案: