[v1] problem with `prepend/append` icon on input field



  • I base on Meteor JS.
    have problem with prepend/append icon on input field

        <q-input
          bottom-slots
          v-model="text"
          label="Label"
          counter
        >
          <template v-slot:prepend>
            <q-icon name="place"/>
          </template>
          <template v-slot:append>
            <q-icon
              name="close"
              @click="text = ''"
              class="cursor-pointer"
            />
          </template>
    
          <template v-slot:hint>Field hint</template>
        </q-input>
    

    0_1550411581046_c7299b25-07f0-4f13-9fc4-f9a98ee20554-image.png



  • My package.json

    {
      "name": "meteor-quasar1",
      "private": true,
      "scripts": {
        "start": "meteor run",
        "test": "meteor test --once --driver-package meteortesting:mocha",
        "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
        "visualize": "meteor --production --extra-packages bundle-visualizer"
      },
      "dependencies": {
        "@babel/runtime": "^7.1.5",
        "@quasar/extras": "^1.0.0",
        "lodash": "^4.17.11",
        "meteor-node-stubs": "^0.4.1",
        "quasar": "^1.0.0-beta.2",
        "vue": "^2.6.6",
        "vue-router": "^3.0.2",
        "vuex": "^3.1.0"
      },
      "meteor": {
        "mainModule": {
          "client": "client/main.js",
          "server": "server/main.js"
        },
        "testModule": "tests/main.js"
      }
    }
    


  • Works fine here: https://codepen.io/smolinari/pen/aXPzbo?editors=1010

    Are you sure there isn’t a closing tag or something missing?

    Scott



  • Still don’t work (Copy your code)

           <div class="q-pa-md" style="max-width: 300px">
              <q-input
                bottom-slots
                v-model="text"
                label="Label"
              >
                <template v-slot:prepend>
                  <q-icon name="place"></q-icon>
                </template>
                <template v-slot:append>
                  <q-icon
                    name="close"
                    @click="text = ''"
                    class="cursor-pointer"
                  ></q-icon>
                </template>
                <template v-slot:hint>Field hint</template>
              </q-input>
            </div>
    

    0_1550449244165_480163e0-58a5-462a-b850-962e28a918c7-image.png



  • Well, I was trying to show you your own code works in a Quasar environment (I took the code from your first post). You’ll need to dig deeper in your environment to find out why it isn’t working.

    Scott



  • Now I tried install npm install vue-template-compiler --save.
    It work fine (I don’t understand???)

    0_1550583904768_e93a231b-5996-4ae5-9225-d81245610447-image.png



  • Me neither. 😄

    Scott



  • This is my main.js in Meteor JS

    import { Meteor } from 'meteor/meteor'
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    // App layout
    import AppLayout from '/src/layouts/App.vue'
    
    // Quasar globally
    import '@quasar/extras/material-icons/material-icons.css'
    import 'quasar/dist/quasar.min.css'
    import Quasar from 'quasar/dist/quasar.esm.js'
    // import Quasar from 'quasar/dist/quasar.umd.min.js'
    import langEn from 'quasar/lang/en-us'
    
    Vue.use(Quasar, {
      lang: langEn,
    })
    
    // Router
    import routes from '/src/routes'
    const router = new VueRouter({
      mode: 'history',
      routes,
    })
    
    // Store
    import createStore from '/src/store'
    const store = new Vuex.Store(createStore)
    
    //App start
    Meteor.startup(() => {
      new Vue({
        router,
        store,
        render: h => h(AppLayout),
      }).$mount('app')
    })
    


  • @theara - Sorry, but obviously that is out of the scope of Quasar.

    Scott



  • @theara - the core team and volunteer staff don’t maintain the meteor project… you’ll need to rely on the expertise of MWarren here. We have our hands full getting beta to work within in our own environment. This is critical cuz otherwise we just can’t guarantee that it will work elsewhere.


Log in to reply