Как получить "this", чтобы не быть неопределенным из метода в Vue?

Question

Я не могу получить свойство в моем объекте данных для отображения. Любая помощь с благодарностью.

const people = [{
    name: "Joe Smith",
    address: "123 hello street",
    cityStateZip: "tampa, fl 12345"
  },
  {
    name: "Alan Jones",
    address: "123 hello street",
    cityStateZip: "nyc, ny 12345"
  },
  {
    name: "Tina Roberts",
    address: "123 hello street",
    cityStateZip: "san diego, ca 12345"
  }
]

new Vue({
  el: "#app",
  data: {
    people: people
  },
  methods: {
    getAddress() {
      return '' + this.address + '';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="person in people" class="box">
    <h1>{{person.name}}</h1>
    <a v-text="getAddress()"></a>
  </div>
</div>

Как получить доступ к данным, чтобы распечатать их с помощью метода? Спасибо.

Answer 1

Когда вы ссылаетесь на это, он ссылается на ваш vue компонент, но в вашем Vue компоненте вы определяете только один data элемент, people: people. Чтобы заставить ваш метод работать, вам нужно отправить параметр в ваш метод и использовать переданный параметр вместо this.

HTML: <a v-text="getAddress(person)"></a>

JS:

    getAddress(person) {
      return '' + person.address + '';
    }

Но вы можете легко сделать это, не прибегая к методу:

  <div v-for="person in people" class="box">
    <h1>{{person.name}}</h1>
    <a v-text="person.address"></a>
  </div>