HTML / VUE - 允许用户选择/激活多个<input>元素并同时输入它们

Question

我有一个包含 2 列的 HTML 表，如下所示：

Item       Amount
Icecream   $3
Hotdog     $5
Hamburger  $10

"金额"列由<input>元素组成，这些元素存在于<td>

用户应该能够选择 $3 字段(按住控件？(，然后选择 $5 字段，然后键入 $6 ，导致 $3 和 $5 更改为 $6。
我知道这是两个问题。我想一旦我知道如何让用户选择多个输入，我就能弄清楚打字部分。我正在使用 Vue 以防有帮助

Answer 1

您必须做一些事情才能实现这一目标：

1. 收听点击事件，这在 vuejs 中相当容易

<element @click="firstWay"/> // this will pass only the `$event` as an argument
<element @click="$event => secondWay($event, someOtherProperty)"/> // and this way, you can define your own arguments

methods: {
firstWay ($event) { },
secondWay ($event, someOtherProperty) {}
}

2. 知道何时按下 ctrl 键(event.ctrlKey在那里为您服务(
3. 跟踪所选项目 - 使用数据对象。

例

模板

<tr
v-for="(item, idx) in items"
:key="idx"
>
<td v-text="item.name"/>
<td>
<input
type="number"
:value="item.price"
step="0.01"
:selected="item.selected"
@click="$event => onClick($event, item)"
@input="$event => onInput($event, item)"
/>
</td>
</tr>

JavaScript

data: {
items: [
{ name: 'Icecream',     price: 3.14, selected: false },
{ name: 'Hotdog',       price: 6.00, selected: false },
{ name: 'Hamburger',    price: 2.00, selected: false }
]
},
methods: {
onClick (event, item) {
if (event.ctrlKey) {
item.selected = !item.selected
}
},
onInput (event, item) {
const value = event.target.value
item.price = value
if (!item.selected) return
this.items
.filter(it => it.selected)
.forEach(it => {
it.price = value
})
}
}

风格

input[selected] {
outline: 1px solid red;
}

在这里你玩工作演示