web-dev-qa-db-ja.com

vue jsは単一のハンドラーで複数のプロパティを監視します

現在、いくつかのプロパティを監視する必要があります。そして、それらのそれぞれが変更された場合、同じ関数を呼び出す必要があります。

export default{
    // ...... rest of code 
    watch: {
      propa: function(after,before) {
         doSomething(after,before);
      },
      propb: function(after,before) {
         doSomething(after,before);
      }
      // ... so on
    }
}

したがって、上記の同じコードを複数回記述する必要があります。同じコードを複数回記述することなく、すべてのプロパティを監視し、それらの変更ハンドラーを呼び出すだけで可能ですか？

PS：私はvue 1.xを使用しています

vue.jsvue-loader
13
rahulserver

あなたの質問を解決する公式の方法はありません（ これを参照 ）。ただし、計算されたプロパティをトリックとして使用できます。

export default {
  // ...
  computed: {
    propertyAAndPropertyB() {
      return `${this.propertyA}|${this.propertyB}`;
    },
  },
  watch: {
    propertyAAndPropertyB(newVal, oldVal) {
      const [oldPropertyA, oldProvertyB] = oldVal.split('|');
      const [newPropertyA, newProvertyB] = newVal.split('|');
      // doSomething
    },
  },
}

何かをしたいだけで、新しい値や古い値を気にしない場合。 2行無視

const [oldPropertyA, oldProvertyB] = oldVal.split('|');
const [newPropertyA, newProvertyB] = newVal.split('|');
16
Yi Feng Xie

別の可能性：

new Vue({
  el: '#app',
  data: {
    name: 'Alice',
    surname: 'Smith',
    fullName: '' // this should be a computed!! but bear with me, it's just a demo
  },
  mounted() {
    this.$watch(vm => [vm.name, vm.surname], val => {
      
      this.fullName = this.name + ' ' + this.surname;
      
    }, {immediate: true}) // run immediately
  }
});
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div>
    name:<input v-model="name">
  </div>
  <div>
    surname:<input v-model="surname">
  </div>
  <div>
    full name: {{ fullName }}
  </div>
</div>
5
acdcjunior

まず、定義を簡素化できます。 doSomethingはVueのメソッドではないようです。そのため、時計は

watch:{
    propa: doSomething,
    propb: doSomething
}

第二に、Vue定義オブジェクトは単なるJavaScriptオブジェクトです。操作することができます。

データオブジェクトのeveryプロパティを監視したい場合は、次のようにすることができます。

function doSomething(after, before){
  console.log(after,before);
}

function buildWatch(def){
  if (!def.watch)
    def.watch = {};
  for (let prop of Object.keys(def.data))
    def.watch[prop] = doSomething;
  return def;
}

let vueDefinition = {
  data:{
    propa: "testing",
    propb: "testing2",
    propc: "testing3"
  }
}

export default buildWatch(vueDefinition)

定義済みのプロパティリストのみを表示する場合：

// First argument is the definition, the rest are property names
function buildWatch(def){
  if (!def.watch)
    def.watch = {};
  const properties = Array.prototype.slice.call(arguments,1); 
  for (let prop of properties)
    def.watch[prop] = doSomething;
  return def;
}

export default buildWatch(vueDefinition, "propa", "propb")
2
Bert

このような：

data() {
  return {
    propa: '',
    propb: ''
  }
},
computed: {
  changeData() {
    const { propa, propb } = this
    return {
      propa,
      propb
    }
  }
},
watch: {
  changeData: {
    handler: function(val) {
      console.log('value change: ', val)
    },
    deep: true
  }
}
1
gold three