No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. pepe pipo
    P
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 5
    • Best 1
    • Groups 0

    pepe pipo

    @pepe pipo

    1
    Reputation
    62
    Profile views
    5
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    pepe pipo Follow

    Best posts made by pepe pipo

    • RE: Why should I choose Quasar instead of Ionic?

      OK, you have convinced me. I’ll go through Quasar.
      The only thing that does not convince me is the support of the project. I read that it was created as a one-person project and that it does not have the impulse of any great company. I am right? Are there plans in the future to have more secure support from some company for example?

      posted in Help
      P
      pepe pipo

    Latest posts made by pepe pipo

    • RE: How to separate methods from MyLayout.vue to a mixin.js?

      My error was not in mixins.js, neither in MyLayout.vue, but in index.vue

      posted in Help
      P
      pepe pipo
    • RE: Tabs Styling - Full Width / Justify on Desktop

      It does not work for me

      <q-tabs>
              <q-tab slot="title" icon="input"/>
              <q-tab slot="title" icon="input"/>
      </q-tabs>
      ...
      <style scoped>
      .-tabs-scroller, .q-tab {
          flex: 1 1 auto;
      }
      </style>
      

      PD: @rstoenescu did you made the specifil class?

      posted in Help
      P
      pepe pipo
    • How to separate methods from MyLayout.vue to a mixin.js?

      MyLayout.vue

      <template>
      ...
      
          <q-layout-drawer
            v-model="leftDrawerOpen"
            :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
          >
            <q-list no-border link inset-delimiter>
              <q-list-header>Listas de tareas</q-list-header>
              <q-item v-for="list of lists" :key="list._id" 
                :class="{active:list._id == selected}" @click.native="selected = list._id">
                <q-item-main :label="list.title" />
                <q-item-side right icon="delete" 
                v-if="selected == list._id"
                @click.native="deleteList(selected)"/>
              </q-item>
              <q-item>
                <q-item-main>
                  <q-input v-model.trim="list.title" placeholder="+ Nueva lista" @keyup.enter="sendList"/>
                </q-item-main>
                <q-item-side right icon="format_color_fill">
                  <q-popover>
                    <q-color-picker v-model="list.color"/>
                  </q-popover>
                </q-item-side>
              </q-item>
            </q-list>
          </q-layout-drawer>
      
          <q-page-container>
            <router-view />
          </q-page-container>
        </q-layout>
      </template>
      
      <script>
      import { openURL } from 'quasar'
      
      class List {
        constructor(title = '', color = '') {
          this.title = title;
          this.color = color;
        }
      }
      
      export default {
        name: 'MyLayout',
        data () {
          return {
            leftDrawerOpen: this.$q.platform.is.desktop,
            list: new List(),
            lists: [],
            selected: undefined,
          }
        },
        created() {
          this.getLists();
        },
          methods: {
              openURL,
              submit () {
                return
              },
              sendList() {
              if(this.list.title == '') { return }
              else {
                fetch('http://localhost:3000/api/lists', {
                  method: 'POST',
                  body: JSON.stringify(this.list),
                  headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                  }
                })
                  .then(res => res.json())
                  .then(data => {
                    this.getLists();
                    this.list = new List();
                  });
              }
              },
      
            getLists() {
              fetch('http://localhost:3000/api/lists')
                .then(res => res.json())
                .then(data => {
                  this.lists = data;
                });
            },
      
            deleteTask(listId) {
              fetch('http://localhost:3000/api/lists/' + listId, {
                method: 'DELETE',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                }
              })
                .then(res => res.json())
                .then(data => {
                  this.getLists();
                });
            },
          }
      }
      </script>
      

      I want to separate the methods in a mixin.js, I tried this:
      mixins.js

      export default {
        created: function() {
          this.getLists();
        },
        methods: {
          sendList: function() {
            if(this.list.title == '') { return }
            else {
              fetch('http://localhost:3000/api/lists', {
                method: 'POST',
                body: JSON.stringify(this.list),
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                }
              })
                .then(res => res.json())
                .then(data => {
                  this.getLists();
                  this.list = new List();
                });
            }
          },
      
          getLists: function() {
            fetch('http://localhost:3000/api/lists')
              .then(res => res.json())
              .then(data => {
                this.lists = data;
              });
          },
      
          deleteList: function(listId) {
            fetch('http://localhost:3000/api/lists/' + listId, {
              method: 'DELETE',
              headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
              }
            })
              .then(res => res.json())
              .then(data => {
                this.getLists();
              });
          },
        }
      }
      

      I have this error (twice, like if the mixins runs two times don’t know why)

      Property or method “lists” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

      It seems that if I put the methods in an external file it can not receive the data. I have also tried adding the following data to mixins.js before the methods:

      data () {
          return {
            list: new List(),
            lists: [],
            selected: undefined,
          }
        },
      

      but I get many more mistakes still

      in MyLayout.vue

      Error in data(): “ReferenceError: List is not defined”

      Property or method “leftDrawerOpen” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

      Property or method “lists” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

      Error in render: “TypeError: Cannot read property ‘title’ of undefined”

      TypeError: Cannot read property ‘title’ of undefined

      in mixins.js

      List is not defined

      posted in Help
      P
      pepe pipo
    • RE: Why should I choose Quasar instead of Ionic?

      OK, you have convinced me. I’ll go through Quasar.
      The only thing that does not convince me is the support of the project. I read that it was created as a one-person project and that it does not have the impulse of any great company. I am right? Are there plans in the future to have more secure support from some company for example?

      posted in Help
      P
      pepe pipo
    • Why should I choose Quasar instead of Ionic?

      I have discarded all the frameworks that I have found and finally I have stayed with these two: Ionic and Quasar.

      When Quasar was created, Ionic worked only with angular, but today it is agnostic to frameworks, therefore, compatible with vuejs. So, what differences does Quasar have with respect to Ionic? What advantages and disadvantages does each one have?

      posted in Help
      P
      pepe pipo