观看在 Vue 中没有得到所有内容

Question

<template>
 <v-form :model='agency'>
  <v-layout row wrap>
    <v-flex xs12 sm12 lg12 >
      <v-layout row wrap>
       <v-flex xs12 md12 class="add-col-padding-right">
        <v-radio-group
         v-model="agency.location"
         :mandatory="true"
         label="Please select one of the options below">
           <v-radio label="NYC" value="nyc"></v-radio>
           <v-radio label="SAN JOSE" value="san_jose"></v-radio>
        </v-radio-group>
       </v-flex>
      </v-layout>
    </v-flex>
  </v-layout> 
 </v-form>
</template>   

<script>

  export default {

   data: function () {
    return {
      agency: {
        id: '',
        name: '',
        location: '',
        contacts: {
          name: '',
          number: '',
          address: ''
        }
      },
      final_location_contact: {
       name: '',
       number: '',
       address: ''
      }
    }
   }
   watch: {
    agency: {
      handler(val){
       if (this.agency.location === "nyc") {
        this.final_location_contact = this.agency.contacts;
       }
    }
   },
   created: function() {
    this.fetchAgency();
   },
   method: {
    fetchAgency() {
      this.$axios.get('/agency.json')
      .then(response => {
        if (Object.keys(response.data).length > 0) {
          this.agency = response.data;
        }
      }).
      then(() => {
      });
    },
   }
  }
</script>

我在这里面临的问题是页面加载时，并且 fetchAgency 方法运行并且我能够获取代理数据。当我从单选按钮中选择第一个选项时，我可以将值 agent.contacts 值分配给 final_location_contact。但是当我第一次选择 San Jose 单选按钮选项，然后我选择 nyc 单选按钮然后我无法将值 agent.contacts 值分配给 final_location_contact 时，问题就出现了，因为我使用调试器检查了 agent.contacts 的值是空的.但如果我第一次选择 nyc，它不会为空。任何想法可能是问题所在？

'agency.location': {
  handler (newValue, oldValue) {
    if (newValue === "nyc") {
      this.final_location_contact = this.agency.contacts;
    }
    else {
      this.final_location_contact.name: '',
      this.final_location_contact.number: '',
      this.final_location_contact.address: ''
    }
  }
 }

Answer 1

您遇到的问题是，在 JavaScript 看来，当您更改 agency.location 时，您并没有更改 agency 的值。在语言的眼中agency 仍然是同一个对象，无论你对它的属性做什么。该观察者正在等待对整个对象的更改，例如agency = {different: "object"}，我建议您将location 拆分为它自己的顶级属性并进行调整，如下所示：

data: function () {
    return {
      location: '',
      agency: {
        id: '',
        name: '',
        location: '',
        contacts: {
          name: '',
          number: '',
          address: ''
        }
      },
      final_location_contact: {
       name: '',
       number: '',
       address: ''
      }
    }
   }

这样，您可以像这样在该属性上设置一个观察者：

watch: {
    location: function(val) {
      this.agency.location = val
       if (val === "nyc") {
        this.final_location_contact = this.agency.contacts;
       }
    }
   },

Answer 2

正如 Jacob 所说，观察者没有被触发，因为代理本身没有改变。

在评论中我建议使用深度观察器，但这不是最好的方法。您可以通过这种方式专门听取对“agency.location”所做的更改：

watch: {
  'agency.location': {
    handler (newValue, oldValue) {
      // this will be triggered every time `agency.location` is changed
    }
  }
}

这比深度观看要好，看起来像这样

watch: {
  deep: true,
  agency (newValue, oldValue) {
    // logic
  } 
}

因为任何时候agency 或它的任何属性都会发生变化，都会触发深度观察器。

这里是fiddle，它演示了不同之处以及它是如何实现的（确保打开控制台）。

如果此处的问题是未触发观察者，则无需更改模型/模板。

Answer 3

watch: {
 'agency.location': {
      handler (newValue, oldValue) {
        var new_location = {}
        if (newValue === "nyc") {
          new_location = this.agency.contacts;
        }
        else {
          new_location = {
            name: '',
            number: '',
            address: ''
          }
        }
        this.final_location_contact = new_location;
      }
    }
}

我就是这样做的。