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

    q-select with computed property as model

    Help
    computed q-select
    1
    1
    1648
    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
      sribe last edited by

      I have a table of data where each row contains a select. As a baseline, this works like I expect:

      <template>
        <tr>
          <td class="row">
            <q-select v-model="row.OpDef_Id" :options="choices" />
          </td>
        </tr>
      </template>
      
      <script>
      export default {
        name: 'status-post-ops-row',
        props: {
          row: {required: true, type: Object},
          choices: {required: true, type: Array}
        }
      }
      </script>
      

      But this does not:

      <template>
        <tr>
          <td class="row">
            <q-select v-model="proxy" :options="choices" />
          </td>
        </tr>
      </template>
      
      <script>
      export default {
        name: 'status-post-ops-row',
        props: {
          row: {required: true, type: Object},
          choices: {required: true, type: Array}
        },
        computed: {
          proxy: {
            get () {
              return this.row.OpDef_Id
            },
            set (v) {
              this.row.OpDef_Id = v
            }
          }
        }
      }
      </script>
      

      Now there are other ways to accomplish my goal and they might be better. But I’m wondering if the above should work and the failure is a bug, or if it’s not expected to work (and why)?

      What happens in the second example is that proxy's set method is called and the data updated, but get is not called and the display of the q-select does not update. Any reload causes the display to update with the correct label–confirming that set did the correct thing.

      In the first example, if I look at events, q-select emits an input then the popover emits a hide. In the second, that also happens, then q-select additionally emits a change. Both input events and the change event have the value of the choice.

      I’ve tried adding emit of input, change, and even both to the set but that made no difference.

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