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
    1. Home
    2. sribe
    S
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 1
    • Best 1
    • Groups 0

    sribe

    @sribe

    1
    Reputation
    69
    Profile views
    1
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    sribe Follow

    Best posts made by sribe

    • q-select with computed property as model

      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.

      posted in Help
      S
      sribe

    Latest posts made by sribe

    • q-select with computed property as model

      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.

      posted in Help
      S
      sribe