小编The*_*Guy的帖子

数据表中的 Vuetify 工具提示

我想在 vuetify 数据表中添加一些工具提示,但没有任何反应。

这是我需要使用工具提示的模板

<template v-slot:item.state="{ item }">
   <div :class="lights(item)"></div>
</template>
Run Code Online (Sandbox Code Playgroud)

我像这样使用它

<v-tooltip left>
      <template v-slot:activator="{ on }">
         <template v-slot:item.state="{ item }">
           <div :class="lights(item)"></div>
         </template>
      </template>
   <span>Tooltip</span>
</v-tooltip>
Run Code Online (Sandbox Code Playgroud)

我还有一个需要工具提示的模态,但它也有一个 v 槽激活器:

<template v-slot:activator="{ toggle }">
   <v-tooltip bottom>
       <template v-slot:activator="{ on }" >
            <v-icon :color="color" v-on="on" v-on="toggle">mdi-power</v-icon>
        </template>
         <span>Tooltip</span>
    </v-tooltip>
</template>
Run Code Online (Sandbox Code Playgroud)

我能怎么做 ?

javascript vue.js vuetify.js

5
推荐指数
1
解决办法
5483
查看次数

Vuetify 数据表移动断点

我有这个 vuetify 数据表,我希望在移动调整大小时保持相同的行为。所以我只想要同一行上的所有数据。

https://codepen.io/sebastiancz/pen/JjoVRVg?editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</div>
Run Code Online (Sandbox Code Playgroud)
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24
        },
        {
          name: 'Ice cream …
Run Code Online (Sandbox Code Playgroud)

vue.js vuetify.js

4
推荐指数
1
解决办法
4136
查看次数

Vuetify 小吃栏 有条件

有人知道如何根据服务器应答的结果显示小吃栏。

例如,如果提交正常,则显示成功的绿色小吃栏和成功消息,但如果出现错误,我需要显示红色错误小吃栏和错误消息的绑定。

我想我需要通过一个方法来显示它。我想在像这样的一个小吃店里做到这一点。

<v-snackbar
    :color = "color" 
> {{text here}}
</v-snackbar
Run Code Online (Sandbox Code Playgroud)

服务器帖子示例

http.post(apiAdresse, objectToPost)
   .then(() => {
     something to do here})
   .catch(error => {
     console.log(error)};)
Run Code Online (Sandbox Code Playgroud)

编辑代码:

        <v-snackbar
                :color="snackbar.color"
                v-model="snackbar.show">
            <v-icon class="snackIcon">{{snackbar.icon}}</v-icon>
            {{ snackbar.message }}
            <v-btn
                    dark
                    text
                    @click="snackbar = false"
            >
                Close
            </v-btn>

        </v-snackbar>
Run Code Online (Sandbox Code Playgroud)

当我点击关闭按钮时

Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'show' in false"


Run Code Online (Sandbox Code Playgroud)

javascript vue.js vuetify.js

3
推荐指数
1
解决办法
5694
查看次数

消除图标按钮上的涟漪效应

我需要一个图标来完成按钮的工作(加载)但我会删除这个图标的圆形按钮效果

我怎样才能做到这一点 ? https://codepen.io/sebastiancz/pen/gOpjbar?editors=1010

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <div>
        <v-btn flat icon color="blue lighten-2">
          <v-icon>power</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</div>
Run Code Online (Sandbox Code Playgroud)

vue.js vuetify.js

2
推荐指数
1
解决办法
7122
查看次数

标签 统计

vue.js ×4

vuetify.js ×4

javascript ×2