VueJS условное свойство не определено, хотя оно существует наверняка - PullRequest
0 голосов
/ 07 февраля 2020

Я использую магазин в Quasar (на основе VueJS), и когда я вставляю новый объект в свою базу данных, магазин обновляется. Объекты называются «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))
  })
}

Это действительно странно, потому что это единственное свойство, которое не работает. Вот как я обновляю sh список, когда запускаю приложение, и с этим все отображается правильно везде:

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))
  })
}

Если кто-нибудь может мне помочь, это было бы мило. Спасибо:)

1 Ответ

1 голос
/ 07 февраля 2020

возможно, проблема в том, что caption поддерживает необходимую строку, и вы передаете ей свойство даты.

попробуйте вызвать .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>
...