Thx a lot for all your ideas.

I really do not understand why after all my approaches

newObj = JSON.parse(JSON.stringify(oldObj))

actually works

For the long run, I will then implement a better solution based on Vuex / mutations.

Hey guys,

I have now tried for hours (no kidding) to implement an undo function in my app - but I can’t figure out how to correctly implement this. I guess I run into a problem regarding asynchronious/synchronious code execution.

I have an object I like to copy before I delete an element. So in case the user like to undo the last action I can simply “restore” the copy of the original object.
But whatever combination I have tried the respective element is also deleted in the copy.

Before I delete an element in the object this.Survey I make a copy:

methods: {
    storeUndoMemory() {
      this.SurveyUndoMemory = Object.assign({}, this.Survey);
    },
    deleteQuestion(val, val2) {
      this.storeUndoMemory();
      this.$delete(this.Survey.Pages[val].Questions, val2);
      this.UndoLastStepNotify();
    },
    cloneObject(obj) {
      if (null == obj || "object" != typeof obj) return obj;
      var copy = obj.constructor();
      for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
      }
      return copy;
    }

Instead of using Object.assign() I also tried the function cloneObject() as I thought that the problem occurs cause Object.assign does not make a copy but only is a kind of reference in the original object. But it makes no difference.

Okay, after rethinking the problem, I figured out a different approach and that works finde.

In case someone else will face this topic here is my solution:

<q-card
      v-for="(Article, key) in ArticleStore"
      :key="key"
      class="my-article-card"
      flat
      bordered
    >
      <q-card-section horizontal>
        <q-card-section class="q-pt-xs">
          <div class="text-overline text-red-8">{{ Article.domain }}</div>
          <q-chip
            v-if="Article.teaserImage == '' || Article.teaserImage == undefined"
            class="absolute-top-right"
            square
            clickable
            :icon="renderedBookmark(key)"
            @click="changeStatusOfArticle(key)"
          ></q-chip>
          <div class="text-h5 q-mt-sm q-mb-xs">{{ Article.title }}</div>
          <div class="text-caption text-grey">
            {{ Article.teaser }}
          </div>
        </q-card-section>

        <q-card-section
          v-if="Article.teaserImage != '' && Article.teaserImage != undefined"
          class="col-5 flex flex-center"
        >
          <q-chip
            class="absolute-top-right"
            square
            clickable
            :icon="renderedBookmark(key)"
            @click="changeStatusOfArticle(key)"
          ></q-chip>
          <q-img class="rounded-borders" :src="Article.teaserImage" />
        </q-card-section>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      readArticlesObject: {},
      lorem:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    };
  },
  name: "PageIndex",
  methods: {
    changeStatusOfArticle(val) {
      if (val in this.readArticlesObject) {
        this.readArticlesObject[val] = !this.readArticlesObject[val];
        localStorage["readArticlesObject"] = JSON.stringify(
          this.readArticlesObject
        );
      } else {
        this.readArticlesObject[val] = true;
        localStorage["readArticlesObject"] = JSON.stringify(
          this.readArticlesObject
        );
      }

      //localStorage.readArtickleObject = JSON.parse(this.readArticlesObject);
    },
    renderedBookmark(val) {
      if (val in this.readArticlesObject) {
        return this.readArticlesObject[val] ? "bookmark" : "bookmark_border";
      } else {
        this.readArticlesObject[val] = false;
        localStorage["readArticlesObject"] = JSON.stringify(
          this.readArticlesObject
        );
        return "bookmark_border";
      }
    },
    jumpToVue(url) {
      setTimeout(() => {
        this.$router.push(url);
      }, 200);
    }
  },
  mounted() {
    this.readArticlesObject = JSON.parse(localStorage["readArticlesObject"]);
  },

Hello guys,

Again, I am not able to figure out how to realize a feature in Quasar/VueJS.
Problem seems quite simple: I have an Array including articles. Title and some short description for the articles are shown in cards (loop with v-for). For each article I want to have a bookmark icon which the user can click on to change the icon (change icon to mark articles already read). This information then may also be stored in local storage.

It is nearly the same as discussed here:
https://forum.quasar-framework.org/topic/2595/change-qbtn-s-color-and-icon-after-click/1?_=1593446941227

But in my case I have an Array including the articles and would appreciate some hints how to adress this when in need of using key.

<q-card
      v-for="(Article, key) in ArticleStore"
      :key="key"
      class="my-article-card"
      flat
      bordered
    >
   <q-card-section horizontal>
   <q-card-section class="q-pt-xs">
          <div class="text-overline text-red-8">{{ Article.domain }}</div>
          <q-chip
            v-if="Article.teaserImage == '' || Article.teaserImage == undefined"
            class="absolute-top-right"
            square
            :icon="???"
            @click="???"
          ></q-chip>
          <div class="text-h5 q-mt-sm q-mb-xs">{{ Article.title }}</div>
          <div class="text-caption text-grey">
            {{ Article.teaser }}
        </div>
</q-card-section>

Thx a lot
Dirk

@walfin Thank you for your ideas. For now, I changed the routing from “hash” to “history” which is not what you suggested This seems to work in the way that the re-directing works.
But I have to dig deeper into the idea using “abstract” mode but that seems not to work with my current program. I guess I must read a bit about Vue routing in the manual.

Hey guys,

even I investigated Danny’s Smackchat App, I am not able to figure out what’s going on in my app or what I overlook.

I like to re-route the user of my app (dev for Android) to a specific vue (Login.vue) if he/she is not logged in. Authentification is implemented via Firebase.Auth.

So in App.vue I implemented a “handleAuthStateChanged” action including a “firebaseAuth.onAuthStateChanged” according Dannys Smackchat.

handleAuthStateChanged({ commit, dispatch, state }) {
		firebaseAuth.onAuthStateChanged(user => {
		  if (user) {...

and in case user is not logged in I use

else {
       this.$router.replace('/auth')
...

This works when I start the app or reload any vue (page).
But in case I type in a specific URL in browser, I am able to visit a different page and the user is not redirected.

What is my mistake here?

Thx a lot
Dirk

Hey, Scott, thanks for your explanations, that helps me to get a better understanding of the use for vuex. Will just read something about what Flux patterns are

BR
Dirk

Hi everyone,

Just being a beginner in VueJS I wonder how to make a state persistent between closing and reopening an Android app.

I saw there are some plug-ins to add this functionality. But I wonder what is the advantage of using vuex, states and vuex-persist instead of using localStorage, for instance.

BR Dirk

Hey guys,

Again I am a bit lost in the world of JavaScript, frameworks, databases and co (seems I got stuck in the age of VB.NET, to be honest).

I am working on an Android App based on Quasar. The App mainly deals with articles/news. These articles are stored in Google’s Firebase and retrieved via Vuex. So far, so good, that works fine.

But now I am searching for a solution that is conventient for the authors/editors to write and publish new articles - i.e. a kind of CMS or application allowing for creating new articles and storing the content in Firebase, for instance.

I’ve read something about a solution using Wordpress with a plugin (called Firebase PRO) to store content in Firebase. But this seems not to be my first choice.
Scott suggested to also program the admin panel by myself.

But I really wonder if there is no other ready-to-use solution to admin/edit content that is stored in Firebase? How would you guys adress this issue?

Really appreciate any ideas

Dirk

@dobbel Thank you for your ideas, I will take a closer look whether it would be overkill or a fine solution.