0 
<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: ''
    }
  }
 }
4

3 回答 3

1

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

在评论中我建议使用深度观察者，但这不是最好的方法。您可以通过以下方式专门收听在“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或者它的任何属性发生变化。

这是演示差异及其实现方式的小提琴（确保打开控制台）。

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

于 2020-06-02T19:47:51.040 回答
1

您遇到的问题是，在 JavaScript 的眼中，您并没有改变agencywhen you change的值agency.location。在语言眼中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;
       }
    }
   },
于 2020-06-02T19:16:43.990 回答
0 
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;
      }
    }
}

这就是我让它工作的方式。

于 2020-06-03T16:47:54.383 回答