Vue.js - Cách xem đúng dữ liệu lồng nhau

Tôi đang cố gắng hiểu làm thế nào để theo dõi đúng một số biến thể prop. Tôi có một thành phần cha mẹ (tệp .vue) nhận dữ liệu từ lệnh gọi ajax, đặt dữ liệu vào trong một đối tượng và sử dụng nó để hiển thị một số thành phần con thông qua lệnh v-for, bên dưới đơn giản hóa việc triển khai của tôi:

<template>
    <div>
        <player v-for="(item, key, index) in players"
            :item="item"
            :index="index"
            :key="key"">
        </player>
    </div>
</template>

... sau đó bên trong <script>thẻ:

 data(){
     return {
         players: {}
 },
 created(){
        let self = this;
        this.$http.get('../serv/config/player.php').then((response) => {
            let pls = response.body;
            for (let p in pls) {
                self.$set(self.players, p, pls[p]);
            }
    });
}

các đối tượng mục là như thế này:

item:{
   prop: value,
   someOtherProp: {
       nestedProp: nestedValue,
       myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}

Bây giờ, bên trong thành phần "người chơi" của con tôi đang cố gắng xem bất kỳ biến thể thuộc tính nào của Vật phẩm và tôi sử dụng:

...
watch:{
    'item.someOtherProp'(newVal){
        //to work with changes in "myArray"
    },
    'item.prop'(newVal){
        //to work with changes in prop
    }
}

Nó hoạt động nhưng có vẻ hơi khó đối với tôi và tôi đã tự hỏi liệu đây có phải là cách làm đúng đắn hay không. Mục tiêu của tôi là thực hiện một số hành động mỗi khi propthay đổi hoặc myArraycó các yếu tố mới hoặc một số biến thể bên trong những hành động hiện có. Bất kỳ đề nghị sẽ được đánh giá cao.

Bạn có thể sử dụng một người theo dõi sâu cho điều đó:

watch: {
  item: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

Bây giờ điều này sẽ phát hiện bất kỳ thay đổi nào đối với các đối tượng trong itemmảng và bổ sung vào chính mảng đó (khi được sử dụng với Vue.set ). Đây là một JSFiddle: http://jsfiddle.net/je2rw3rs/

BIÊN TẬP

Nếu bạn không muốn xem mọi thay đổi trên đối tượng cấp cao nhất và chỉ muốn một cú pháp ít khó xử hơn để xem trực tiếp các đối tượng lồng nhau, bạn có thể chỉ cần xem computedthay thế:

var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

Đây là JSFiddle: http://jsfiddle.net/oa07r5fw/

Một cách tiếp cận tốt khác và một cách thanh lịch hơn một chút là như sau:

 watch:{
     'item.someOtherProp': function (newVal, oldVal){
         //to work with changes in someOtherProp
     },
     'item.prop': function(newVal, oldVal){
         //to work with changes in prop
     }
 }

(Tôi đã học cách tiếp cận này từ @peerbolte trong bình luận ở đây )

VueJs theo dõi sâu trong các đối tượng trẻ em

new Vue({
    el: "#myElement",
    data: {
        entity: {
            properties: []
        }
    },
    watch: {
        'entity.properties': {
            handler: function (after, before) {
                // Changes detected. Do work...     
            },
            deep: true
        }
    }
});

Làm thế nào nếu bạn muốn xem một tài sản trong một thời gian và sau đó để bỏ xem nó?

Hoặc để xem một tài sản thành phần thư viện con?

Bạn có thể sử dụng "trình theo dõi động":

this.$watch(
 'object.property', //what you want to watch
 (newVal, oldVal) => {
    //execute your code here
 }
)

Trả $watchvề một chức năng unwatch sẽ dừng xem nếu nó được gọi.

var unwatch = vm.$watch('a', cb)
// later, teardown the watcher
unwatch()

Ngoài ra, bạn có thể sử dụng deeptùy chọn:

this.$watch(
'someObject', () => {
    //execute your code here
},
{ deep: true }
)

Hãy chắc chắn để xem tài liệu

Không thấy nó được đề cập ở đây, nhưng cũng có thể sử dụng vue-property-decoratormô hình nếu bạn đang mở rộng Vuelớp học của mình .

import { Watch, Vue } from 'vue-property-decorator';

export default class SomeClass extends Vue {
   ...

   @Watch('item.someOtherProp')
   someOtherPropChange(newVal, oldVal) {
      // do something
   }

   ...
}

Một cách khác để thêm rằng tôi đã sử dụng để 'hack' giải pháp này là để làm điều này: Tôi thiết lập một computedgiá trị riêng biệt đơn giản sẽ trả về giá trị đối tượng lồng nhau.

data : function(){
    return {
        my_object : {
            my_deep_object : {
                my_value : "hello world";
            }.
        },
    };
},
computed : {
    helper_name : function(){
        return this.my_object.my_deep_object.my_value;
    },
},
watch : {
    helper_name : function(newVal, oldVal){
        // do this...
    }
}

Vấn đề của tôi với câu trả lời chấp nhận của việc sử dụng deep: true, là khi sâu xem một mảng, tôi không thể dễ dàng xác định mà phần tử của mảng chứa các thay đổi. Giải pháp rõ ràng duy nhất tôi tìm thấy là câu trả lời này, giải thích cách tạo một thành phần để bạn có thể xem từng thành phần mảng riêng lẻ.

Theo dõi các mục thay đổi cá nhân trong một danh sách

Nếu bạn muốn xem tất cả các mục trong một danh sách và bí quyết mà mục trong danh sách thay đổi, bạn có thể thiết lập theo dõi tùy chỉnh trên tất cả các mục riêng biệt, như vậy:

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
  },
  methods: {
    handleChange (newVal, oldVal) {
      // Handle changes here!
      // NOTE: For mutated objects, newVal and oldVal will be identical.
      console.log(newVal);
    },
  },
  created () {
    this.list.forEach((val) => {
      this.$watch(() => val, this.handleChange, {deep: true});
    });
  },
});

Nếu danh sách của bạn không được điền ngay lập tức (như trong câu hỏi ban đầu), bạn có thể di chuyển logic ra khỏi createdbất cứ nơi nào cần thiết, ví dụ như bên trong .then()khối.

Xem danh sách thay đổi

Nếu danh sách của bạn tự cập nhật để có các mục mới hoặc đã xóa, tôi đã phát triển một mẫu hữu ích "nông" xem chính danh sách đó và đồng hồ động / bỏ theo dõi các mục khi danh sách thay đổi:

// NOTE: This example uses Lodash (_.differenceBy and _.pull) to compare lists
//       and remove list items. The same result could be achieved with lots of
//       list.indexOf(...) if you need to avoid external libraries.

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
    watchTracker: [],
  },
  methods: {
    handleChange (newVal, oldVal) {
      // Handle changes here!
      console.log(newVal);
    },
    updateWatchers () {
      // Helper function for comparing list items to the "watchTracker".
      const getItem = (val) => val.item || val;

      // Items that aren't already watched: watch and add to watched list.
      _.differenceBy(this.list, this.watchTracker, getItem).forEach((item) => {
        const unwatch = this.$watch(() => item, this.handleChange, {deep: true});
        this.watchTracker.push({ item: item, unwatch: unwatch });
        // Uncomment below if adding a new item to the list should count as a "change".
        // this.handleChange(item);
      });

      // Items that no longer exist: unwatch and remove from the watched list.
      _.differenceBy(this.watchTracker, this.list, getItem).forEach((watchObj) => {
        watchObj.unwatch();
        _.pull(this.watchTracker, watchObj);
        // Optionally add any further cleanup in here for when items are removed.
      });
    },
  },
  watch: {
    list () {
      return this.updateWatchers();
    },
  },
  created () {
    return this.updateWatchers();
  },
});

Không có câu trả lời cho tôi đã làm việc. Trên thực tế nếu bạn muốn xem dữ liệu lồng nhau với các Thành phần được gọi nhiều lần. Vì vậy, họ được gọi với các đạo cụ khác nhau để xác định chúng. Ví dụ<MyComponent chart="chart1"/> <MyComponent chart="chart2"/> Cách giải quyết của tôi là tạo một biến trạng thái vuex bổ sung, mà tôi cập nhật thủ công để trỏ đến thuộc tính được cập nhật lần cuối.

Dưới đây là ví dụ triển khai Vuex.ts:

export default new Vuex.Store({
    state: {
        hovEpacTduList: {},  // a json of arrays to be shared by different components, 
                             // for example  hovEpacTduList["chart1"]=[2,6,9]
        hovEpacTduListChangeForChart: "chart1"  // to watch for latest update, 
                                                // here to access "chart1" update 
   },
   mutations: {
        setHovEpacTduList: (state, payload) => {
            state.hovEpacTduListChangeForChart = payload.chart // we will watch hovEpacTduListChangeForChart
            state.hovEpacTduList[payload.chart] = payload.list // instead of hovEpacTduList, which vuex cannot watch
        },
}

Trên bất kỳ chức năng Thành phần nào để cập nhật cửa hàng:

    const payload = {chart:"chart1", list: [4,6,3]}
    this.$store.commit('setHovEpacTduList', payload);

Bây giờ trên bất kỳ Thành phần nào để có được bản cập nhật:

    computed: {
        hovEpacTduListChangeForChart() {
            return this.$store.state.hovEpacTduListChangeForChart;
        }
    },
    watch: {
        hovEpacTduListChangeForChart(chart) {
            if (chart === this.chart)  // the component was created with chart as a prop <MyComponent chart="chart1"/> 
                console.log("Update! for", chart, this.$store.state.hovEpacTduList[chart]);
        },
    },