Question

我是vuejs的新手，正在使用vuetify。我只想在单击v-data-table中的按钮时显示一个对话框。这是我到目前为止所做的。

echo "set file sharing to true"

BASE_PLIST="${SRCROOT}/Customization/Info.plist"
/usr/libexec/PlistBuddy -c "Print :UIFileSharingEnabled" "$BASE_PLIST"
/usr/libexec/PlistBuddy -c "Set :UIFileSharingEnabled bool true" "$BASE_PLIST"
/usr/libexec/PlistBuddy -c "Print :UIFileSharingEnabled" "$BASE_PLIST"

v对话

https://codepen.io/iskaryote1/pen/GbYjZJ?&editable=true&editors=101

每次单击按钮时，浏览器都会挂起，并且控制台日志中显示递归过多

谢谢。

Answer 1

尝试在插槽中的插槽中打开插槽是递归的……看起来您的模板插槽本身每次打开时都会自行打开。

我建议您阅读this answer，其中详细介绍了v-slot:activator的使用。

Answer 2

只需将对话框模式放在表外，然后用一个简单的按钮以编程方式将其打开：

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1">
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
        <td>
          <v-btn color="primary" dark @click="dialog = true">Open Dialog</v-btn>
        </td>
      </template>
    </v-data-table>

    <v-dialog v-model="dialog" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog = false">Disagree</v-btn>
          <v-btn color="green darken-1" flat @click="dialog = false">Agree</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>    
  </v-app>
</div>

单击v-data-tables中的v-btn后，v-dialog不显示

2 个答案: