Question

我对VueJS很新。

从我看到的情况来看，这可能是一个优雅的答案。我有一张记录表。单击其中一个打开一个模态并加载该行/记录。我的代码看起来像这样（更容易阅读）：

的Javascript

app = new Vue({
    el: '#app',
    data: {
        records: [], //keys have no significance
        focusRecord: { //this object will in the modal to edit, initialize it
            id: '',
            firstname: '',
            lastname: ''
        },
        focusRecordInitial: {}
    },
    created: function(){
        //load values in app.records via ajax; this is working fine!
        app.records = ajax.response.data; //this is pseudo code :)
    },
    methods: {
        loadRecord: function(record){
            app.focusRecord = record; // and this works
            app.focusRecordInitial = record;
        }
    }
});

HTML

<tr v-for="record in records">
    <td v-on:click="loadRecord(record)">{{ record.id }}</td>
    <td>{{ record.firstname }} {{ record.lastname }}</td>
</tr>

我想要做的事情非常简单：检测focusRecord在从行/记录加载到模态后是否发生了变化。理想情况下，我可以参考另一个属性，如app.focusRecord.changed。我想这可能是我正在学习的计算字段，但是再次使用Vue可能会有更优雅的方式。我该怎么做？

Answer 1

您需要的是使用VueJS观察者：https://vuejs.org/v2/guide/computed.html#Watchers

   ...
   watch : {
       focusRecord(newValue, oldValue) {
           // Hey my value just changed
       }
   }
   ...

这是另一种方法，但我不知道什么是“focusRecordInitial”

new Vue({
   el: '#app',
   data() {
       return {
            records: [],
            focusRecordIndex: null
       }
   },
   computed :  {
       focusRecord() {
           if (this.focusRecordIndex == null) return null
           if (typeof this.records[this.focusRecordIndex] === 'undefined') return null
           return this.records[this.focusRecordIndex]
       }
   },
   watch : {
       focusRecord(newValue, oldValue) {
           alert('Changed !')
       }
   },
   created() {
        this.records = [{id: 1, firstname: 'John', lastname: 'Doe'}, {id: 2, firstname: 'Jane', lastname: 'Doe'}, {id: 3, firstname: 'Frank', lastname: 'Doe'}]
   },
   methods : {
       loadRecord(index) {
           this.focusRecordIndex = index
       }
   }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <table>
        <tr v-for="(record, i) in records">
            <td><button @click="loadRecord(i)">{{ record.id }}</button></td>
            <td>{{ record.firstname }} {{ record.lastname }}</td>
        </tr>
    </table>
    {{focusRecord}}
</div>

Answer 2

Vue Watchers

Vue提供了一种更通用的方法来通过watch选项对数据更改做出反应。当您希望执行异步或昂贵的操作以响应更改的数据时，这非常有用。

Vue JS Watchers

您可以这样做：

app = new Vue({
    el: '#app',
    data: {
        records: [], //keys have no significance
        focusRecord: { //this object will in the modal to edit, initialize it
            id: '',
            firstname: '',
            lastname: ''
        },
        focusRecordInitial: {}
    },
    created: function(){
        //load values in app.records via ajax; this is working fine!
        app.records = ajax.response.data; //this is pseudo code :)
    },
    methods: {
        loadRecord: function(record){
            app.focusRecord = record; // and this works
            app.focusRecordInitial = record;
        }
    },
    watch: {
        loadRecord: function () {
            alert('Record changed');
        }
    }
});

您还可以查看：Vue JS Computed Properties

Answer 3

您可以设置watcher以对数据更改作出反应：

watch: {
     'focusRecord': function(newValue, oldValue) {
         /* called whenever there is change in the focusRecord
           property in the data option */
         console.log(newValue); // this is the updated value
         console.log(oldValue); // this is the value before changes 
     }
}

key对象中的watch是您要观察更改的表达式。表达式只是您想要观看的属性的点分隔路径。

示例：

watch: {
     'focusRecord': function(newValue, oldValue) {
         //do something
     },
     'focusRecord.firstname': function(newValue, oldValue){
         //watch 'firstname' property of focusRecord object
     }
}

确定VueJS中是否有一组相关值发生了变化

的Javascript

HTML

3 个答案:

Vue Watchers