vue.js - vuejs directive based on variable -
is possible dynamically assign directive? assign success or error based on variable named type. (which replace):
v-snackbar(v-if="type === 'success'", success, timeout=3000, bottom=true, right=true, v-model='snackbar') {{ snackbartext }} v-btn(flat, @click.native="snackbar = false") v-icon close v-snackbar(v-if="type === 'error'", error, timeout=3000, bottom=true, right=true, v-model='snackbar') {{ snackbartext }} v-btn(flat, @click.native="snackbar = false") v-icon close
error , success not directives, props on v-snackbar component.
you can bind error , success props directly boolean expression or variable.
v-snackbar(:error="type === 'error'", :success="type === 'success'", timeout='3000', bottom='bottom', right='right', v-model='snackbar') | {{ snackbartext }} v-btn(flat='flat', @click.native='snackbar = false') v-icon close
here in html confused pug syntax.
<v-snackbar :error="type === 'error'" :success="type === 'success'" timeout="3000" bottom="bottom" right="right" v-model="snackbar">{{ snackbartext }} <v-btn flat="flat" @click.native="snackbar = false"> <v-icon>close</v-icon> </v-btn> </v-snackbar>
take @ example 2 on vuetifyjs website more complete example. https://vuetifyjs.com/components/snackbars
wiki
Comments
Post a Comment