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. nededa
    N
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 20
    • Best 3
    • Groups 0

    nededa

    @nededa

    3
    Reputation
    4
    Profile views
    20
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    nededa Follow

    Best posts made by nededa

    • RE: Apollo graphql

      @vasya sure, hope it helps. 🙂

      <template>
        <div id="q-app">
          <router-view />
        </div>
      </template>
      <script lang="ts">
      import { defineComponent, provide } from '@vue/composition-api';
      import { DefaultApolloClient } from '@vue/apollo-composable'
      import ApolloClient from 'apollo-boost'
      
      const apolloClient = new ApolloClient({
        uri: 'http://127.0.0.1/graphql'
      })
      
      export default defineComponent({
        name: 'App',
        setup () {
          provide(DefaultApolloClient, apolloClient)
        },
      });
      </script>
      
      posted in Help
      N
      nededa
    • RE: Q-Uploader with Composition API

      @pazarbasifatih P.S. in composition api “this” is similar to context which can be accessed as second parameter in setup function

      setup(props, context)
      

      Or can be destructed if only refs is needed

      setup(props, { refs })
      
      posted in Framework
      N
      nededa
    • RE: q-table highlight filtered value

      If I understood you correctly you could just wrap it in span element by using replace and then use v-html to render html. Something like this:

      <q-td
          key="calories" 
          :props="props"
          v-html="props.item.calories.replace(searchValue, `<span style='color:yellow'>${searchValue}</span>`"
      >
      </q-td>
      
      posted in Help
      N
      nededa

    Latest posts made by nededa

    • RE: Crome Auto filling Color in input Field! anyone solve it?

      You should make a codepen example. It’s not clear what issue you have.

      posted in Help
      N
      nededa
    • RE: How to list tags followed by a "new tag" entry?

      @wpq this is some basic css question not really related to quasar or even js. Lots of ways to accomplish this for one you could add float:left to all elements.

      Also check quasar select component it already does what you’re trying to accomplish https://quasar.dev/vue-components/select#Example--Selected-item-slot

      posted in Help
      N
      nededa
    • RE: Q-Uploader with Composition API

      @pazarbasifatih P.S. in composition api “this” is similar to context which can be accessed as second parameter in setup function

      setup(props, context)
      

      Or can be destructed if only refs is needed

      setup(props, { refs })
      
      posted in Framework
      N
      nededa
    • RE: [Feature request] Is it possible to get to the middle of an infinite scroll

      Yes back button doesn’t work the same way as good old pre js rendering days. Try keep-alive component https://router.vuejs.org/api/#router-view

      Although from your twitter example I wouldn’t use vue router to redirect user to different page just show it on the same page.

      posted in Framework
      N
      nededa
    • RE: q-table highlight filtered value

      @erhard you mean you want to highlight input text? You could just hide text and use default slot to show div on top of input also disable pointer events for div overlay. It is a bit hacky but either this or you’ll have to replace your inputs with div+contenteditable.

        <q-input v-model="text" label="Standard">
          <template v-slot:default>
            <div class="relative">
              <div 
                   class="absolute text-black" 
                   style="left:0;top:25px;pointer-events:none"
                   v-html="text.replace(search, `<span class='text-red'>${search}</span>`)"
              ></div>
            </div>
          </template>
        </q-input>
        
        <style>
        
          input {
        
            color: white !important
        
          }
        
        </style>
      posted in Help
      N
      nededa
    • RE: q-table highlight filtered value

      If I understood you correctly you could just wrap it in span element by using replace and then use v-html to render html. Something like this:

      <q-td
          key="calories" 
          :props="props"
          v-html="props.item.calories.replace(searchValue, `<span style='color:yellow'>${searchValue}</span>`"
      >
      </q-td>
      
      posted in Help
      N
      nededa
    • RE: Apollo graphql

      @s-molinari but why is this still in a docs? https://apollo.vuejs.org/guide/installation.html#_1-apollo-client

      posted in Help
      N
      nededa
    • RE: QTable updated nested column value

      @metalsadman yeah I think I weren’t clear enough. I meant updating nested object value dynamically. Basically idea is to wrap q-table in a custom component for easy CRUD.

      posted in Help
      N
      nededa
    • RE: QTable updated nested column value

      If anyone encounters same problem I just ended doing it like this:

      const columns = [
          {
            label: 'Client',
            field: row => row.client.name,
            editField: 'client.name',
          },
        ]
      
          const setRowField = (row, field, newValue) => {
            const keys = field.split('.')
            while (keys.length > 1) {
              row = row[keys.shift()]
            }
            row[keys[0]] = newValue
          }
      
        <template v-slot:body-cell="props">
          <td>
              <q-input :value="props.value" @input="setRowField(props.row, props.col.editField || props.col.field, $event)"/>
          </td>
        </template>
      
      posted in Help
      N
      nededa
    • RE: Apollo graphql

      @vasya sure, hope it helps. 🙂

      <template>
        <div id="q-app">
          <router-view />
        </div>
      </template>
      <script lang="ts">
      import { defineComponent, provide } from '@vue/composition-api';
      import { DefaultApolloClient } from '@vue/apollo-composable'
      import ApolloClient from 'apollo-boost'
      
      const apolloClient = new ApolloClient({
        uri: 'http://127.0.0.1/graphql'
      })
      
      export default defineComponent({
        name: 'App',
        setup () {
          provide(DefaultApolloClient, apolloClient)
        },
      });
      </script>
      
      posted in Help
      N
      nededa