MDSLKTR / pouch-vue

Pouchdb bindings for Vue.js
MIT License
90 stars 17 forks source link

request: an example to demonstrate editing a single item #27

Open BananaAcid opened 5 years ago

BananaAcid commented 5 years ago

The current examples are fine, but talking to two other friends of mine, they seem to have the same problem: how to build a todo app, where the editing is using another view (passing the doc._id).

Another thing: The auth examples shows two code blocks - but no explanation where/how to use them. I know, it is probably super clear for a pro using this plugin for a while, but not for beginners with this plugin.

Would be great if you could see to this, as I believe it would make it easier to get going with it.

btw, using framework7.io/vue - building a PWA

assemblethis commented 5 years ago

That's a great idea. If I have time or someone else does maybe we can get some fully worked out examples put up here.

As for immediately, the Boatnet project might interest you: https://github.com/nwfsc-fram/boatnet

They're using pouch-vue in their PWA.

BananaAcid commented 5 years ago

went with (maybe as a starting point)

       {
        pouch: {

            item() {
                const self = this;
                return {
                    database: 'items',
                    selector: {_id: self.$f7route.params.id}, // the view used the Framework7 router to receive the item._id
                    first: true // returns a single item (not the usual array of items)
                }
            }

        },
         }

need to wait for the item to be populated, v-if will only show if it is there

        <div v-if="!item">
                 loading, please wait ...
                </div>

        <div v-if="item">
                 Item JSON: {{item}}
                </div>
MDSLKTR commented 5 years ago

Hey, thanks for the feedback! Those code snippets were initially just for reference on an internal project. I agree that there is a need for more context on the topic. The login example will generally help you sign in to your pwa leading the user to another page, something like a dashboard. The session example will be called on all "protected" routes making sure the user is signed in otherwise redirecting to the login view.