How does Vue monitor an object and execute a method when the content of the object changes?

how does Vue monitor an object and execute a method when the content of the object changes?

Vue.js
Mar.03,2021

you can use the watch method in vue to listen to the object. Set deep:true to do deep listening. When the properties in the object change, the handler method will be called, and you can write your logic in it

. 
<template>
  <div>
    <input v-model="user.name">
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
          name: ''
      }
    }
  },

  watch:{
      user: {
        deep: true,
        handler: function (newVal,oldVal){
          console.log('newValue', newVal);
          console.log('oldValue', oldVal.name);
        }
      }
  },
}

it is recommended that you use watch listening events to complete

., watch: {'params.limit': function (newValue, oldValue) {}, name: function (newValue, oldValue) {}},

suppose you have an object in your ViewModel that is {params: {limit:'}, name:''}

solve this how to monitor? 

<table ...>
  ...
  <tbody>
    <tr v-for="(item, index) in items" :key="index" :class="{ actived : selected === index}">
      <td>{{ item.name }}</td>
      <td>
        <input v-if="item.editable" v-model="item.age" type="number" ... />
        <span v-else>{{ item.age }}</span>
      </td>
    </tr>
  </tbody>
</table>

question:
how do I automatically focus on the input box when a row is selected for editing? < td: ref= "'input' + index". > invalid , < tr index for = "(item, index) in items": key= "index": ref= "item". > is also not available through $el.querySelector (' input.number') .

Previous: After gulp starts a service, the service points directly to index.html, but cannot load css and image js.

Next: The click event in the react project has no effect, and there is no error reported in the console.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu