You must do a few things to achieve that:
- Listen to on click event, which is fairly easy in 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) {}
}
- Know when ctrl key is pressed (
event.ctrlKey is there for you)
- Keep track of selected items - using your data object.
Example
Template
<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
})
}
}
Styles
input[selected] {
outline: 1px solid red;
}
Here you play with working demo
