2017-05-03 7 views
6

Ben bir dizi varDizide yalnızca bir nesne nasıl izlenir?</p> <pre><code>basicForm.schema = [ {}, {} // I want to watch only this ] </code></pre> <p>denedim bunu:

‘basicForm.schema[1].value’: { 
    handler (schema) { 
    const plan = schema.find(field => { 
     return field.name === ‘plan’ 
    }) 
    }, 
    deep: true 
}, 

Ama bu hata var:

vue.js?3de6:573 [Vue warn]: Failed watching path: “basicForm.schema[1]” Watcher only accepts simple dot-delimited paths. For full control, use a function instead.

Bunu yapmanın doğru yolu nedir?

cevap

5

yapabilirsiniz yerine watch bir computed property: uyarı mesajı da anlaşılacağı gibi

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    basicForm: { 
 
     schema: [ 
 
     \t {a: 1},{b: 2} // I want to watch only this 
 
     ] 
 
    } 
 
    }, 
 
    computed: { 
 
    bToWatch: function() { 
 
     return this.basicForm.schema[1].b 
 
    } 
 
    }, 
 
    methods: { 
 
    incB: function() { 
 
     this.basicForm.schema[1].b++ 
 
    } 
 
    }, 
 
    watch: { 
 
    bToWatch: function(newVal, oldVal) { 
 
     console.log(newVal) 
 
    } 
 
    } 
 
});
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <button @click="incB()">Inc</button> 
 
</div>

3

Bir işlevini kullanmalısınız. vm.$watch aracılığıyla yapmanız gerekir.

new Vue({ 
 
    el: '#app', 
 
    
 
    data: { 
 
    items: [ 
 
     { name: 'bob' }, 
 
     { name: 'fred' }, 
 
     { name: 'sue' }, 
 
    ], 
 
    }, 
 
    
 
    created() { 
 
    this.$watch(() => this.items[1].name, this.onNameChanged); 
 
    }, 
 
    
 
    methods: { 
 
    changeValue() { 
 
     this.items[1].name = 'rose'; 
 
    }, 
 
    
 
    onNameChanged(name) { 
 
     alert('name changed to ' + name); 
 
    }, 
 
    }, 
 
});
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <button @click="changeValue">Click me</button> 
 
</div>

Muhtemelen this.items[1] aksi halde hata alırsınız izle işlevinin içine erişmeden önce var olduğunu kontrol etmelidir.

İlgili konular