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

    binding model to QSelect with checkbox

    Help
    2
    2
    823
    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.
    • M
      mfrz6 last edited by

      im wanna to bind model to QSelect with checkbox,
      but when binding model to QSelect checkbox not checked.
      this is my code:

       data() {
          return {
              selectModel: [],
              selectOptions: [
              {
                label: 'Google',
                value: 1
              },
              {
                label: 'Facebook',
                value: 2
              },
              {
                label: 'Twitter',
                value: 3
              },
              {
                label: 'Apple',
                value: 4
              },
              {
                label: 'Oracle',
                value: 5
              }
            ],
           
          };
        },
      
      

      and button event to binding QSelect

          onBindCheckedSelect() {
      this.selectModel= [
       {
                label: 'Twitter',
                value: 3
              },
              {
                label: 'Apple',
                value: 4,
                
              },
      
          ]},
      

      and this is my html code

       <div class="q-pa-md" style="max-width: 300px">
          <div class="q-gutter-md">
            <q-badge color="secondary" multi-line>
              Model: "{{ model }}"
            </q-badge>
      
            <q-select
                filled
                v-model="selectModel"
                :options="selectOptions"
                label="Multi with toggle"
                multiple
                emit-value
                map-options
            >
              <template v-slot:option="scope">
                <q-item
                  v-bind="scope.itemProps"
                  v-on="scope.itemEvents"
                >
                  <q-item-section>
                    <q-item-label v-html="scope.opt.label" ></q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-checkbox v-model="selectModel" :val="scope.opt.value" />
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
        </div>
      

      but its not working and selected item not checked

      qselect-bug.png

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @mfrz6 last edited by

        @mfrz6

        Please create a codepen( very simple to do by extending a Quasar Doc example) to demo your problem so the people here can help you better.

        btw: I don’t think it’s a good idea to use both v-model and :val on the same component

        <q-checkbox v-model="selectModel" :val="scope.opt.value" />

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