using the v-modeled data in two variable in vue

Question

I v-model a data in my vue html to validate it in my form , but i also want to use it in other variable too this is my html

<input class="input-style px-3" :class="{'border-red-error':v$.categoryTitle.$errors.length>0}" type="text"
            placeholder="title" :disabled="formIsSending" v-model="DataForValidating .categoryTitle">

this is my js code , but it does not work

 const DataForValidating = reactive({
      categoryTitle: '',
      categorySlug: '',
    })

 const categoryFormData = {
      categoryTitle: DataForValidating.categoryTitle,
      categorySlug: DataForValidating.categorySlug,
    }

i made categoryFormData reactive too , but it does not work

score 1 · Answer 1 · answered Sep 19 '22 at 08:06

1

use @input event and pass a function then store "DataForValidating.categoryTitle" in another variable or you can directly use arrow function in @input event to assign that v-model variable to another

answered Sep 19 '22 at 08:06

AliRjbzdeh

19
3

score -1 · Answer 2 · answered Sep 19 '22 at 06:36

i got answer , i need to use watcher

 watch:{
     'newCategoryData.categoryTitle': function (newVal){
      this.categoryFormData.categoryTitle=newVal
     },
     'newCategoryData.categorySlug': function (newVal){
      this.categoryFormData.categorySlug=newVal
     },
 }

using the v-modeled data in two variable in vue

2 Answers2