V-for 的问题

Question

我正在尝试使用 Q-Cards 遍历客户信息数组。我已经过测试以确保我的客户数组始终得到更新并具有我想要从我的 NodeJS 服务器获得的值，但它拒绝显示任何 Q-Cards。我尝试了很多东西，但我根本无法让它工作。任何建议或意见都会很棒。提前致谢

<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 的问题

Trouble with V-for

vue.js

quasar

v-for