変数に基づくvuejsディレクティブ

Question

ディレクティブを動的に割り当てることはできますか？変数名型に基づいて成功またはエラーを割り当てたいと思います。私は現在これをしています（私は置き換えたいです）：

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 

Answer 1

エラーと成功は、v-snackbarコンポーネントの小道具です。

ブール式または変数を使用して、エラーおよび成功の小道具に直接バインドできます。

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 

ここでは、pug構文で混乱する人のためのhtmlです。

<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> 

さらに詳しい例については、vuetifyjsのWebサイトの例2を参照してください。 https://vuetifyjs.com/components/snackbars