Vue v-model on a specific prop

Question

I want v-model="num" just when the v-if prop === 'amount'. How can i do it? because the input is common to 'qty' and 'book_value'

<template #item="{ prop, value, rowIndex }">
    <div
    v-if="prop === 'qty' || prop === 'book_value'"
    >
    <input
      v-model="num"
      :value="preview && prop === 'book_value'? formatAmount(value) : value"
      :preview="preview"
       @input="setRuleItem({ newValue: $event, prop, rowIndex, name: 'actions' })"
     />

---------------------------

watch: {
    num (newVal, oldVal) {
      if (newVal.includes('.')) {
        this.$nextTick(() => { this.num = newVal.split('.')[0] + '.' + newVal.split('.')[1].slice(0, 2) })
      }
    }
  },

Not clear at all.

user3718908x100
– user3718908x100

2021-07-29 16:01:45 +00:00
Commented Jul 29, 2021 at 16:01 — user3718908x100
– user3718908x100, Commented Jul 29, 2021 at 16:01

MohKoma · Accepted Answer · 2021-07-29 16:11:00Z

1

You can do it in many ways, but here are some simple examples

Use input handler instead of v-model

<input @input="(val) => prop === 'amount' ? num = val : false" :value ... />

create another element

<input v-if="prop === amount" v-model="num"...><input v-else :value... ></input>

edited Jul 29, 2021 at 16:11

answered Jul 29, 2021 at 16:05

MohKoma

1,51216 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ProfDFrancis Over a year ago

Of which the second is less likely to break, although it does double the code.

Collectives™ on Stack Overflow

Vue v-model on a specific prop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related