VueJS 条件属性未定义，但肯定存在

Question

我在 Quasar（基于 VueJS）中使用一个商店，当我在我的数据库中插入一个新的 object 时，商店会更新。 object 被命名为 "demande"，它们有一个 "dateDemande" 属性。一切看起来都很好，但由于某种原因，当我想在标题中显示它时，这个属性没有显示，尽管它显示在 q-card 部分：

<template>
  <q-pull-to-refresh @refresh="actualiserListe">
    <q-page padding>
      <q-list bordered class="rounded-borders">
        <q-expansion-item
        v-for="demande in demandes"
        :key="demande.idDemande"
        class="q-my-sm"
        :icon="icone(demande.statut).icone"
        :header-class="icone(demande.statut).color"
        :label="demande.texte"
        :caption="demande.dateDemande">
          <q-separator />
          <q-card>
            <q-card-section>
              {{ demande.statut }}
            </q-card-section>
            <q-card-section>
              {{ demande.idDemande }}
            </q-card-section>
            <q-card-section>
              {{ demande.dateDemande }}
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
    </q-page>
  </q-pull-to-refresh>
</template>

以下是我如何插入 "demande" 并更新商店：

export const ajouterDemande = (state, demande) => {
  window.sqlitePlugin.openDatabase ({ name: 'xxx.db', location: 'default' }, function (db) {
    db.transaction (function (tx) {
      var dateDemande = new Date ()
      tx.executeSql ('INSERT INTO demandes (dateDemande, texte, statut) VALUES (?,?,?)', [dateDemande, demande.texte, 'En cours'], function (tx, resultSet) {
        demande.idDemande = resultSet.insertId
        demande.dateDemande = dateDemande
        demande.statut = 'En cours'
      }, function (tx, error) {
        alert ('INSERT error: ' + error.message)
        db.close()
      })
    }, function (error) {
      alert ('transaction error: ' + error.message)
      db.close()
    }, function () {
      console.log ('transaction ok')
      state.demandes.push (demande)
      db.close(function () {
        console.log('database is closed ok')
      })
    })
  }, function (err) {
    alert ('[BDD] ERREUR: ' + JSON.stringify(err))
  })
}

这真的很奇怪，因为这是唯一的属性不起作用。以下是我在启动应用程序时刷新列表的方式，这样所有内容都可以正确显示：

export const actualiserListe = (state) => {
  state.demandes = []
  window.sqlitePlugin.openDatabase ({ name: 'xxx.db', location: 'default' }, function (db) {
    db.readTransaction (function (tx) {
      tx.executeSql ("SELECT * FROM demandes", [], function (tx, resultSet) {
        for (var x = 0; x < resultSet.rows.length; x++) {
          alert (JSON.stringify(resultSet.rows.item(x)))
          state.demandes.push ({
            idDemande: resultSet.rows.item(x).idDemande,
            dateDemande: resultSet.rows.item(x).dateDemande,
            texte: resultSet.rows.item(x).texte,
            statut: resultSet.rows.item(x).statut
          })
        }
      }, function (tx, error) {
        console.log ('SELECT error: ' + error.message)
        db.close()
      })
    }, function (error) {
      console.log ('transaction error: ' + error.message)
      db.close()
    }, function () {
      console.log ('transaction ok')
      db.close(function () {
        console.log('database is closed ok')
      })
    })
  }, function (err) {
    alert ('[BDD] ERREUR: ' + JSON.stringify(err))
  })
}

如果有人能帮助我，那就太好了。谢谢:)

Answer 1

可能问题在于 caption prop 需要字符串，而您将日期属性传递给它。

尝试在上面调用 .toString()

例如在您的代码中

<template>
  <q-pull-to-refresh @refresh="actualiserListe">
    <q-page padding>
      <q-list bordered class="rounded-borders">
        <q-expansion-item
        v-for="demande in demandes"
        :key="demande.idDemande"
        class="q-my-sm"
        :icon="icone(demande.statut).icone"
        :header-class="icone(demande.statut).color"
        :label="demande.texte"
        :caption="demande.dateDemande.toString()">
          <q-separator />
          <q-card>
            <q-card-section>
              {{ demande.statut }}
            </q-card-section>
            <q-card-section>
              {{ demande.idDemande }}
            </q-card-section>
            <q-card-section>
              {{ demande.dateDemande }}
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
    </q-page>
  </q-pull-to-refresh>
</template>

VueJS 条件属性未定义，但肯定存在

VueJS conditional property undefined whereas it exists for sure

vue.js

vuex

quasar-framework

VueJS 条件 属性 未定义，但肯定存在

VueJS conditional property undefined whereas it exists for sure

vue.js

vuex

quasar-framework

VueJS 条件属性未定义，但肯定存在