I am trying to look at a variable in an array associated with a repeating element using v-repeat, but it does not seem to work. There is a violin here
My HTML looks something like this:
<div id="test"> <div v-repeat="details"> <select v-model="hour"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <pre> {{ $data | json }} </pre> </div>
and vue js like this
new Vue({ el: '#test', data: { details: [ { hour: 2, changeThis: null }, { hour: 3, changeThis: null } ], }, watch: { 'details': function (val, oldVal) { alert() }, } })
Linking to watch properties works fine, but I can't get the watch to shoot. I also tried deeply: true, but that doesn't work either. If I define my watch as
watch: { 'details[0].hour'
then I can make it work, but since I don’t know how many details I will have, then I really do not want to do this for everyone. What I ideally want to do is get a reference to an array element that is being updated, and then go from there. I could achieve what I want by adding
v-on="change:someVar(detail)"
for the select element and do it this way, but I'm curious why the approach I'm trying doesn't work.
Edit Actually, you can return the full array using a deep observer as @kishanterry notes below (thanks for that), I missed this syntax in the docs. However, it still does not quite give the solution I was hoping for
// deep watcher 'c': { handler: function (val, oldVal) { /* ... */ }, deep: true }