时间戳

首页 > 解决方案 > 带有vue问题的递增和递减表单组件

javascript - 带有vue问题的递增和递减表单组件

问题描述

拜托我已经在这里待了将近三天。

我一直在尝试构建一个递增和递减可重用组件，其中可以将值传递给它，并且可以通过触摸按钮来增加和减少，并且可以使用 Vue 将值提交到表单中。

下面是我的代码

父组件

<controlinput name="rooms" v-model.number="form.rooms">How many rooms are in the place? </controlinput>
<controlinput name="toilet" v-model.number="form.toilet">How many toilets are in the place? </controlinput>

data() {
    return {
        form: {
            rooms: 0,
            toilet: 0,
        },        
    }
},

子组件

<div class="control">
    <button type="button" class="control-button" @click="decreaseNumber"><img src="~/assets/svg/minus.svg" alt="-"/></button>
    <div class="control-content">
        {{value}}
    </div>
    <button type="button" class="control-button" @click="increaseNumber"><img src="~/assets/svg/plus.svg" alt="+"/></button>
</div>

props: {
    value: {
        default: 0
    }
},
methods: {
    decreaseNumber() {
        console.log('decrease button clicked');
        console.log(this.value--);
    },
    increaseNumber() {
        console.log('increase button clicked');
        console.log(this.value++);
    }
},

请感谢任何帮助

标签： javascriptvue.jsvuejs2nuxt.js

解决方案

查看文档的这一部分。如果你想实现 a v-model，你的组件需要接受 a value，并发出一个input事件。

methods: {
  decreaseNumber() {
    this.$emit('input', this.value - 1);
  },
  increaseNumber() {
    this.$emit('input', this.value + 1);
  }
}

数据（例如rooms）属于父级。子组件不能直接修改它（例如this.value--），但可以为父组件发出一个事件以使用正确的值更新其数据。

推荐阅读