[SOLVED] (v-bind?) Syntax for options when nested in v-for



  • 
    <template>
      <div class="stats-search">
          <div v-for="row in statFields"  :key="row.id">
    
            {{row.id}} {{row.label}} {{row.options}}  // PRINTS OK, DATA IS PRESENT
    
            <hr>
          <q-select
            option-value="value"
            option-label="label"
            clearable
            filled
            multiple
            v-model="targets"
            :options="{{row.options}}" <--- SYNTAX?
            :label="'...'"
            >
          </q-select>
          -->
          </div>
      </div>
    </template>
    
    ---
    
    statFields = [ {id: fd.field_id,  label: fd.label, options:fd.options}, ...]
    
    In each statFields, options= [{"label": "Single", "value": "20" },...]
    
    
    :options="{{row.options}}" <--- SYNTAX?  V-BIND (colon)
      Errors compiling template:
      invalid expression: Unexpected token { in
        {{row.options}}
      Raw expression: :options="{{row.options}}"
    	
    options="{{row.options}}" <--- SYNTAX? NO VBIND (colon)
      Errors compiling template:
      options="{{row.options}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
    	
    

    Hope this is clear to a guru.
    I have an array of fields (v-for row) , each is a q-select.

    How d I get the options into the q-select? (row.options)?

    Thanks in advance.



  • This did the trick:

            :options="row.options"
    

    …and now seems blazingly obvious. Sigh.


Log in to reply