vue 多个input 编辑时监听

Question

想在这种情况下，当修改其中一个input时，显示对应的确定button，怎么才能监听到

<div v-for="n in fruit">
            <div>
                <input type="text" name="" :value="n.apples">
                <button>确定</button>
            </div>
            <div>
                <input type="text" name="" :value="n.oranges">
                <button>确定</button>
            </div>
            <div>
                <input type="text" name="" :value="n.bananas">
                <button>确定</button>
            </div>
            <div>
                <input type="text" name="" :value="n.peachs">
                <button>确定</button>
            </div>
        </div>

data:{
    fruit: [
        {'apples': 54},
        {'oranges': 12},
        {'bananas': 4},
        {'peachs': 45},
    ]
}

Answer 1

可以做成一个组件，包含一个 input 和一个 button，button 设置条件渲染，然后在 input 元素上绑定 input 事件设置 button 条件渲染的条件变量为 true。

数据以及 确定 按钮的 点击事件通过 props 传递进这个组件。

Answer 2

楼主，不太明白你的需求。是在输入框的时候要把其他的button都隐藏掉吗？可是目前是全部显示的。如果要输入才隐藏的话，体验会不会很差？然后就是我不太清楚，什么情况下才会有这样的需求？