I am using a q-input with autogrow however a scrollbar is showing for some reason. Any ideas why this might be and how to get rid of it?

<template>
  <div class="row q-mb-sm">        
    <q-input 
      autofocus
      outlined 
      clearable
      autogrow
      :value="name" 
      ref="name" 
      class="col"
      label="Account name"
      @input="$emit('update:name', $event)"
      :rules="[val => !!val || 'Field is required']" 
    />
  </div>    
</template>

<script>
  export default {
      props: ['name']
  }
</script>

Ah yes that’s what I needed, thanks for that.

Thanks metalsadman but I was already aware of that and implemented it in the code above and in my script, but it’s not working when I try to combine it with the example for having editable fields using QPopupEdit. There doesn’t seem to be any example in the docs that I can find for this case.

I’m wondering is it possible to create a qtable with multiple selection (so that you can then click a single button to delete all selected at once) and with q-popup-edit for the row fields to allow editing of the row values?

I’ve tried the following without success:

          <q-table
            title="AccountValues"
            :data="bankAccountValuesByAccountId( selectedAccountId() )"
            :columns="tableColumns()"
            row-key="date"            
            :filter="filter"
            :loading="loading"
            :pagination.sync="pagination"
            :selected-rows-label="getSelectedString"
            selection="multiple"
            :selected.sync="selected"
            >
            <template v-slot:top>
              <q-btn flat dense color="primary" :disable="loading" label="Add row" @click="addRow" />
              <q-btn class="on-right" flat dense color="primary" :disable="loading" label="Remove row" @click="removeRow" />
              <q-space />
              <q-input borderless dense debounce="300" color="primary" v-model="filter">
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
              </q-input>
            </template>            

            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="date">
                  {{ props.row.date }}
                  <q-popup-edit v-model="props.row.date">
                    <q-date
                      v-model="props.row.date"
                      mask="YYYY-MM-DD"
                    />
                  </q-popup-edit>
                </q-td>

                <q-td key="value" :props="props">
                  {{ props.row.value }}
                  <q-popup-edit v-model="props.row.value" title="Update value" buttons>
                    <q-input 
                      type="number" 
                      v-model="props.row.value" 
                      dense 
                      autofocus />
                  </q-popup-edit>
                </q-td>                
              </q-tr>              
            </template>
          </q-table>

Thanks Axi. I had come across that page too and tried implementing it but it wasn’t working for me. Eventually discovered that I was including a forward slash at the end of the 8080 and this was causing the issue. I hate it when it’s something small like that.

On a side note, I didn’t see any sort of CORS policy in Mitchell’s sample template, do you know why that is? As far as I see, the frontend and backend are set up to run on different ports.

Hi Mitchell,

I’ve tried out your template and got it working - thanks for sharing.

I tried building my own similar one except with Quasar v1.0.0 beta & .NET Core 2.1. However I’ve run into the following issue:
“Access to XMLHttpRequest at ‘https://localhost:5001/api/values’ (redirected from ‘http://localhost:8080/api/values’) from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
Did you have this issue and if so how do you get around it?

Thanks,
Eoin.