When I modify the state in Vue.js, the two-way binding feature does not seem to function properly

Question

When I modify the state in Vue.js, the two-way binding feature does not seem to function properly

I'm facing an issue with my dynamic array "slots" of objects which looks something like this:

[{"availability": 1},{"availability": 3}]

I render multiple inputs in Vue.js using v-for like so:

<div v-for="slot in array"><input v-model="slot.availability></input></div>

Then, I add a watcher to monitor if any object's value increases by more than 10. If it does, I reset it to 10 as shown below:

watch: {
  slots: {
    handler() {
      this.slots.forEach(slot => {
        if (slot.availability > 10) slot.availability = 10;
      });
    },
    deep: true
  }
}

However, this only works the first time. For instance, if I type '99', it resets to 10. But if I continue typing '9', it doesn't change '109' to '10'. The resetting to 10 only happens when I click away from the input field. I believe there might be a solution using a computed property, but I'm not sure how to implement it. Any assistance would be highly appreciated!

javascript vue.js vue-reactivity

Answer 1

Answer №1

Your Vue v3 code implementation is running smoothly without any issues.

const { createApp, ref } = Vue 

const data  = [{"quantity": 2}, {"quantity": 7}, {"quantity": 9}]

const App = {
  setup() {
    const items = ref(data);    
    return { items }
  },
  watch: {
    items: {
      handler() {
        this.items.forEach(item => {
          if (item.quantity > 10) item.quantity = 10;
        });
      },
      deep: true
    }
  }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
   items: {{items}}
   <div v-for="item in items">
      <input v-model="item.quantity" />
   </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Answer 2

Your Vue v3 code implementation is running smoothly without any issues.

const { createApp, ref } = Vue 

const data  = [{"quantity": 2}, {"quantity": 7}, {"quantity": 9}]

const App = {
  setup() {
    const items = ref(data);    
    return { items }
  },
  watch: {
    items: {
      handler() {
        this.items.forEach(item => {
          if (item.quantity > 10) item.quantity = 10;
        });
      },
      deep: true
    }
  }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
   items: {{items}}
   <div v-for="item in items">
      <input v-model="item.quantity" />
   </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

When I modify the state in Vue.js, the two-way binding feature does not seem to function properly

Answer №1

Similar questions

"Spin an image using Javascript when it is shown on the

How can we pass the onClick prop from a child component to a parent component in React with Typescript?

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

The updated values in an Angular application may not always be accurately represented by interpolated values

Using a local function within Node.js and referencing it with the <%%> tag in a document

Unable to display api results in React using console.log

Is it possible to link a JavaScript object to a dropdown Select Option?

What is the best way to update parent data from a child component?

Incorporate an array into a JSON object using AngularJS

Using jQuery to select all child elements based on a specified condition

Tips for saving a value within a jQuery function for future use in a different function

Issue with clearTimeout function not functioning properly on keyup event in iFrame

Unable to update values in Google Sheets using the node.js API

The value entered for creating a payment method is invalid: the card must be in the form of an object

How come my Ajax call is setting the 'Content-Type' to 'application/x-www-form-urlencoded' instead of 'JSON' as specified in the dataType parameter?

What is the best way to convert a string to JSON format using Javascript?

Implement a personalized Laravel Dusk selector with the attribute data-dusk

The information within the ajax request remains static

Passing Selected Table Row Model Data to Backend in Angular 7

Executing a "call function from a Facebook button within a Vue component" operation in Vue