leveraging the v-modeled information from vue's two variables

Question

leveraging the v-modeled information from vue's two variables

When I v-model a data in my Vue HTML to validate it in my form, I also want to use it in another variable. Here is my HTML code:

<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">

However, my JavaScript code doesn't seem to be working:

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

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

I tried making the categoryFormData reactive as well, but it's still not functioning as expected.

javascript vue.js vuejs2 vuejs3 v-model

Answer 1

Answer №1

Utilize the @input event by passing a function and then saving the data in "DataForValidating.categoryTitle" to a different variable. Alternatively, you can use an arrow function directly in the @input event to assign the value of the v-model variable to another.

Answer 2

Utilize the @input event by passing a function and then saving the data in "DataForValidating.categoryTitle" to a different variable. Alternatively, you can use an arrow function directly in the @input event to assign the value of the v-model variable to another.

Answer 3

Answer №2

i received a response, now I must utilize a watcher

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

Answer 4

i received a response, now I must utilize a watcher

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

leveraging the v-modeled information from vue's two variables

Answer №1

Answer №2

Similar questions

Is there a way to send data to a sibling component without the need to store it as a variable?

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Implementing CSS classes onto HTML elements following their retrieval from a database

Streamline the testing process to ensure compatibility with jQuery version 2.x

AngularJS - Increase the input date by 6 hours before converting it to JSON

The Lerna command for adding packages fails with an error message stating that the packages are not related

Adding a new property to a reactive object in VueJS 3: A simple guide

Exploring the power of async/await and promise in TypeScript

Rules for specifying title attribute for tag a in JavaScript

Utilize the Same Function for Loading Ajax Content to Handle Additional Ajax Content

Node.js middleware for verifying required parameters

The PHP script encountered an issue with the HTTP response code while processing the AJAX contact form, specifically

PHP enables users to look at manual values in columns and MySQL values row by row

Verify whether a variable is empty or not, within the sequence flows in Camunda Modeler

Pressing "Enter" initiates the submission of the form

Tips for utilizing vulnerable web scripts on SSL-enabled pages

Solving dependencies for npm modules

Implementing updates to a website from a database without the need for a page refresh

Is it possible to modify the CSS of a single class when hovering over a child class of a different and unrelated class?

Production environment is facing issues with Laravel API routes, although they function properly in the development environment