Question

我目前正在尝试将子组件$emit数据放入父对象的对象中，并且父对象包含在单击按钮时创建并添加到的数组中。

创建组件按钮的一次迭代

单击按钮两次，将另外2个对象添加到数组中

我不明白如何在通过道具和发射进行预算的同时添加数字，同时还创建新的组件。

Vue的新手，如果不是最好的描述，请抱歉

对象数组

该区域中的每个对象都有预算的，唯一标识，剩余的输入预算 here

父组件

<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，这基本上与a）传递value道具和b）观看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>

这应该使您走上正确的轨道，如果您有任何问题，请告诉我。

Vue.js子组件将数据发送到父对象

1 个答案: