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 传递进这个组件。