Беда с V-для - PullRequest
Новая
       23

Беда с V-для

0 голосов
/ 02 апреля 2019

Я пытаюсь перебрать массив информации о клиенте, используя Q-Cards.Я проверил, чтобы убедиться, что массив моих клиентов всегда обновляется и имеет значения, которые я хочу получить от моего NodeJS-сервера, но он отказывается отображать любые Q-карты.Я перепробовал много вещей, но я не могу заставить его работать вообще.Любой совет или вклад был бы отличным.Заранее спасибо 

<template>
<div id="maincustomer">
    <div id="customerbox">
      <div class="row">
        <q-input class="inputspace" placeholder="First Name" color="secondary" v-model="fname" @input="dataentered()"/> 
        <q-input class="inputspace" placeholder="Last Name" color="secondary" v-model="lname" @input="dataentered()"/> 
        <q-btn class="inputspace" icon="search" color="secondary" :disable="buttonenable" @click="findcustomer()"/>
      </div>
      <div class="row">
        <q-card color="secondary" dark class="q-ma-sm" v-for="customer in customers" :key="customer.CustomerID">
          <q-card-title>
            {{ customer.FirstName }} {{ customer.LastName }}
            <span slot="subtitle">Phone Number: {{ customer.PhoneNumber }}</span>
            <q-icon slot="right" name="person" />
          </q-card-title>
          <q-card-main>
            {{ customer.Address }}
          </q-card-main>
          <q-card-separator />
        </q-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // name: 'ComponentName',
  data () {
    return {
      buttonenable: true,
      fname: "",
      lname: "",
      customers: []
    }
  },
  methods: {
    dataentered: function () {
      if(this.fname=="" && this.lname=="")
      {
        this.buttonenable=true
      }
      else {
        this.buttonenable=false
      }
    },
    findcustomer: function () {
      this.$Socket.emit('findcustomer', {
        fname: this.fname,
        lname: this.lname
      }, function(customerlist) {
          console.log(customerlist)
          this.customers=customerlist
        }
      )
    }
  }
}

</script>

<style>
  #customerbox {
    max-width: 700px;
    display: inline-block;
  }
  .inputspace {
    margin: 5px;
  }
  #maincustomer {
    text-align: center;
  }
</style>

1 Ответ

0 голосов
/ 02 апреля 2019

Возможно, вы потеряли this контекст здесь: 

function(customerlist) {
 console.log(customerlist)
 this.customers=customerlist
}

Поскольку function имеет собственный this контекст.Чтобы исправить это, вы должны использовать функцию стрелки.Для вашего случая: 

findcustomer() {
  this.$Socket.emit('findcustomer', {
    fname: this.fname,
    lname: this.lname
  }, (customerlist) => {
     console.log(customerlist)
     this.customers=customerlist
    }
  )
}
...