Vue: avoid using JavaScript keyword as property name: "function" in expression

Created on 6 Oct 2017  Â·  3Comments  Â·  Source: vuejs/vue

Shows
Exhibitors
Inventory
User 

+
−
Leaflet
Con Agg

Con Agg
980, 2040

this place
896, 1908

marker2
ERROR in ./~/vue-loader/lib/template-compiler?{"id":"data-v-0546479d","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"}}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/Shows/ShowDetails.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:

  <div>
    <spinner v-if="loading" :message="loadingMessage" />
    <b-container fluid>
      <b-row>
        <b-col sm="12">
          <v-map ref="map" :minZoom="minZoom" :crs="crs" :options="menuOptions">
            <v-image-overlay :url="show.floorplan_s3_url" :bounds="floorplanBounds" ref="imageOverlay"></v-image-overlay>
            <v-marker v-for="marker in markers" ref="markerRef" @l-dragend="moveMarker($event, marker)" 
              @l-contextmenu="setPropMarker(marker)" 
              :lat-lng="marker.latLng" 
              :key="marker.id" 
              :draggable="marker.draggable" 
              :options="(function(){return {...{'a':'b'} }})()">
              <v-tooltip :content="marker.name"></v-tooltip>
            </v-marker>
          </v-map>
        </b-col>
      </b-row>
      <b-row>
          <b-card :title="show.name" class="mb-2 show-card">
            <p class="card-text">
              {{ show.name }}
            </p>
          </b-card>
          <b-card v-for="marker in markers" :key="marker.id" class="mb-2 show-card">
            <p class="card-text">
              {{ marker.latLng.lat }}, {{ marker.latLng.lng }}
            </p>
            <p class="card-text">
              {{ marker.name }}
            </p>
          </b-card>
      </b-row>
    </b-container>
    <img hidden id="floorplanSizer" :src="show.floorplan_s3_url" @load="floorplanSizer" />
    <new-ad-slot :lat-lng="latLngProp" />
    <ad-slot-details :adSlotUrl="adSlotUrlProp" />
  </div>

  - avoid using JavaScript keyword as property name: "function" in expression :options="(function(){return {...{'a':'b'} }})()"

this is valid ES6. also

none of these pass either

(()=>{return {...{'a':'b'} }})()

and

(()=>({...{'a':'b'} }))()

Most helpful comment

Vue's expression validation can only parse expressions supported by the Node version you are using, so object spread is not supported unless you use Node 8.6+.

All 3 comments

Hello, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue - thank you!

Vue's expression validation can only parse expressions supported by the Node version you are using, so object spread is not supported unless you use Node 8.6+.

@yyx990803 thanks a lot

Was this page helpful?
0 / 5 - 0 ratings

Related issues

paceband picture paceband  Â·  3Comments

julianxhokaxhiu picture julianxhokaxhiu  Â·  3Comments

lmnsg picture lmnsg  Â·  3Comments

aviggngyv picture aviggngyv  Â·  3Comments

robertleeplummerjr picture robertleeplummerjr  Â·  3Comments