मैं कैसे Vue में एक डेटा वस्तु में सभी चाबियाँ देखते हो 2

Question

मेरे डेटा वस्तु:

data: { 
    selected: { 
     'type': null, 
     'instrument': null 
    }, 

मेरे टेम्पलेट:

<select v-model="selected['instrument']" @change="switchFilter('instrument', $event)"> 
    <option v-for="instrument in instruments" :value="instrument.value">@{{ instrument.text }}</option> 
</select> 

<select v-model="selected['type']" @change="switchFilter('type', $event)"> 
    <option v-for="type in types" :value="type.value">@{{ type.text }}</option> 
</select> 

मैं एक ही समय में दोनों का चयन अनुक्रमित कैसे देख सकते हैं? मैं इस हर तरह कुछ करने के लिए अनुक्रमणिका अद्यतन के किसी भी चाहते हैं:

watch: { 
    selected: function(o, n) { 
     ... 
    } 
} 

Answer 1

आप Vue से watcher द्वारा प्रदान की deep विकल्प का उपयोग कर सकते हैं। जैसा कि दस्तावेज़ों में बताया गया है:

ऑब्जेक्ट्स के अंदर नेस्टेड मूल्य परिवर्तनों का पता लगाने के लिए, आपको गहराई से गुजरना होगा: विकल्प तर्क में सत्य। ध्यान दें कि आपको ऐरे उत्परिवर्तन सुनने के लिए ऐसा करने की आवश्यकता नहीं है।

आप कोड निम्नलिखित तरह दिखेगा:

watch: { 
    'selected': { 
     handler: function (val, oldVal) { 
      console.log('watch 1', 'newval: ', val, ' oldVal:', oldVal) 
     }, 
     deep: true 
    } 
} 

Answer 2

watch: { 
    'selected.type': function (newSelectedType) { 
    console.log(newSelectedType) 
    }, 

    'selected.instrument': function (newSelectedinstrument) { 
    console.log(newSelectedinstrument) 
    } 
} 

तुम सिर्फ selected से एक नया डेटा की गणना करने की कोशिश कर रहे हैं, तो आप सिर्फ अभिकलन गुणों का उपयोग कर सकते हैं, के बाद से Vue के डेटा कर रहे हैं प्रतिक्रियाशील, गणना गुण भी डेटा के परिवर्तनों का पता लगा सकते हैं।

---

आप पूरे वस्तु को देखने के लिए एक भी समारोह का उपयोग करना चाहते हैं, तो आप deep: true साथ $watch उपयोग कर सकते हैं:

mounted() { 
    this.$watch('$data.selected', this.onSelectedUpdate, { deep: true }) 
} 

ध्यान दें कि '$data.selected' एक स्ट्रिंग है, Vue यह पार्स होगा।

और अपने तरीकों में:

onSelectedUpdate (newSelected) { 
    console.log(newSelected) 
}