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

    [Solved] [V1] QInput v-slot: is that possible to get the attribute of QInput

    Framework
    2
    7
    258
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Stanley last edited by Stanley

      <template>
        <div class="fixed-center text-center">
          <q-input v-model="text1" label="Label" readonly>
            <template v-slot:after>
              <q-icon name="search" @click="(evt, ??) => test(evt, ??)" class="cursor-pointer"/>
            </template>
          </q-input>
      
          <q-input v-model="text2" label="Label">
            <template v-slot:after>
              <q-icon name="search" @click="(evt, ??) => test(evt, ??)" class="cursor-pointer"/>
            </template>
          </q-input>
        </div>
      </template>
      
      <script>
      export default {
        data () {
          return {
            text1: '',
            text2: ''
          }
        },
        methods: {
          test (evt, ??) {
            // how to get current QInput attribute, for example, readonly 
          }
        }
      }
      </script>
      

      Thanks a lot for your help!

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        @Stanley assign a ref on your q-input. then you can do this.$refs.yourRef.$props / $attrs.

        S 1 Reply Last reply Reply Quote 0
        • S
          Stanley @metalsadman last edited by

          @metalsadman Thanks!
          This can be a workaround. But if there are 100 QInput or even more, does that mean I have to set ref one by one?

          For a more complex scenario, if I embed QInput into QTable, it is also difficult to name the ref.

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by metalsadman

            @Stanley you can name refs with let’s say the index of your table columns, otherwise you should rethink what you want to achieve there. or you could make use of the props exposed by qtable and check your value from your row data / column definitions.

            S 1 Reply Last reply Reply Quote 0
            • S
              Stanley @metalsadman last edited by

              @metalsadman
              Yes, I agree with you.
              Last question, will it cause performance issue if there are too much refs?

              1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman last edited by

                @Stanley not so much i think. $refs is a vue object. so you can do $refs['yourUniqueRefname'].

                S 1 Reply Last reply Reply Quote 0
                • S
                  Stanley @metalsadman last edited by

                  @metalsadman thank you very much!

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post