Question

我正在尝试使用Q卡遍历客户信息阵列。我已经进行测试，以确保我的客户数组始终得到更新，并具有从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>

Answer 1

可能您在这里丢失了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
    }
  )
}

V-for的问题

1 个答案: