标签: v-slot

我在 v-slot 中使用修饰符时遇到 Eslint 问题

我尝试遵循 nokazn 在这个问题中的答案： 'v-slot'指令不支持任何修饰符 以及 vuejs 的 lint 文档 https://eslint.vuejs.org/rules/valid-v-slot .html

我在我的.eslintrc.js文件中添加：

'vue/valid-v-slot': ['error', {
  allowModifiers: true,
}],

但我在验证 lint 文件时遇到以下错误：

Configuration for rule "vue/valid-v-slot" is invalid:
    Value [{"allowModifiers":true}] should NOT have more than 0 items.

我试图让 lint 接受的是以下代码：

<v-data-table
        :headers="headers"
        :items="data"
        disable-pagination
        fixed-header
      >
        <template v-slot:item.EDIT>
          <v-btn icon>
            <v-icon>mdi-pencil</v-icon>
          </v-btn>
        </template>
      </v-data-table>

（请注意，此代码在 lint 错误旁边起作用）

我是一个非常新的编程。我试图弄清楚如何绑定数据以获取链接 :href 使用 store、vuex 和 bootstrap-vue 表工作。我为此花了 4 天时间，现在我快要死了。请帮忙。

book.js（商店，vuex）

books: [
    {
      id: 1,
      name: "name 1",
      bookTitle: "book1",
      thumbnail: '../../assets/img/book01.jpeg',
      url: "https://www.google.com",
      regDate: '2019-10'
    },
    {
       id: 2,
      name: "name2",
      bookTitle: "book2",
      thumbnail: "book2",
      url: "http://www.yahoo.com",
      regDate: '2019-10'
    },

书单.vue

books: [
    {
      id: 1,
      name: "name 1",
      bookTitle: "book1",
      thumbnail: '../../assets/img/book01.jpeg',
      url: "https://www.google.com",
      regDate: '2019-10'
    },
    {
       id: 2,
      name: "name2",
      bookTitle: "book2",
      thumbnail: "book2",
      url: "http://www.yahoo.com",
      regDate: '2019-10'
    },

<script>
export default {
  name: "BookList",
  components: …

我使用 v-menu 创建多个弹出菜单；我的表中的每一行都有一个。我需要一种在单击提交时关闭菜单的方法。我无法使用 v-model="menu" 并使菜单为 false 或 true 来隐藏或显示菜单，因为当我将其设置为 true 时，每个菜单都会打开！有谁知道在不使用 v-model 的情况下关闭菜单的另一种方法吗？我找到了一种使用激活器插槽打开它的方法。也许有一个激活器插槽也可以关闭该组件？

<template v-slot:item.hours="{ item }">
        <v-menu
          :nudge-width="200"
          :close-on-content-click="false"
          offset-x
        >
          <template v-slot:activator="{ on }">
            <v-chip
              color="blue"
              dark
              v-on="on"
            >
              {{ parseFloat(item.hours).toFixed(1) }}
            </v-chip>
          </template>
          <v-form @submit.prevent="handleSubmitMenu(item)">
            <v-card class="px-5">
              <v-text-field
                label="Edit Hours"
                :value="item.hours"
                @input="updateHours"
              ></v-text-field>
              <v-card-actions>
                <SubmitButton />
              </v-card-actions>
            </v-card>
          </v-form>
        </v-menu>
      </template>

handleSubmitMenu(timeEntry) {
      const hours = this.hours
      this.menu = false
    },

如何在自定义文本时从 v-select 添加复选框而不覆盖multiple.

<v-select
v-model="selectedRepoImage"
:items="repoImages"
item-text="fulltag"
item-value="repo_image_id"
multiple>
       <template v-slot:selection="{ item, index }">
                    <template v-slot:selection="{ item, index }">
                        <v-chip v-if="index === 0">
                            <span>{{item.fulltag}}</span>
                        </v-chip>
                        <span
                        v-if="index === 1"
                        class="grey--text caption"
                        >(+{{ selectedRepoImage.length - 1}} others)</span>
                   </template>
       </template>
       <template v-slot:item="{ item }">
        //checkboxes ??
        //item.name  ??
       </template>
</v-select>

我想知道是否有办法做我想在下面描述的事情：

假设我们有一个带有插槽的组件，并且已经定义了一个后备内容。

在其他地方使用此组件时，我希望有以下行为：

<TheComponent>
  <template v-slot:name="{ data }">
    <fallback v-if="condition(data)"/>
  </template>
</TheComponent>

我想fallback标签（或类似的）不存在（至少，我没有找到它......）。所以我想我的想法是错误的，但我找不到解决问题的方法。

问题是我无法更改，TheComponent因为它是由外部库提供的，而且我不想重新创建内容。

事实上，如果它可以提供帮助，我正在尝试隐藏展开按钮以防止在 Vuetify 中展开一行data-table，具体取决于该行在展开部分是否有要显示的内容。所以我想写一些行为类似于：

<v-data-table :items="items" show-expand ...>
  <template v-slot:item.data-table-expand="{ item }">
    <!-- Here I want the default behavior only if my item respects some condition -->
    <fallback v-if="condition(item)"/>
    <!-- Otherwise, I don't want to display the button that expands the row -->
  </template>
</v-data-table>

预先感谢您的帮助。

我有一个包含可扩展行的 vuetify 数据表。我与演示的唯一真正区别是，我希望该item.name列能够像 V 形图标一样打开/关闭可扩展行。当我在该列的 v 槽上放置一个@click处理程序时，我收到错误Error in v-on handler: "TypeError: expand is not a function"。这是我需要自定义的唯一列，因此我不想<tr>手动构建整个 v 槽。下面是缩小的代码示例。谢谢。

<v-data-table
    :headers="headers"
    :items="products"
    item-key="productCode"
    show-expand
    :expanded.sync="expanded"
>

  <template v-slot:item.name="{ item, expand, isExpanded }" >
    <h4 class="my-2" @click="expand(!isExpanded)">{{ item.name }} located in {{ item.depot | camelToWords }}</h4>
  </template>

  <template v-slot:expanded-item="{ headers, item }">
    <ProductDetailExpandedRow :currentProduct="item" :headers="headers"/>
  </template>

</v-data-table>

<script>
export default {
  data() {
    return {
      headers: [
        {
          text: 'Name',
          value: 'name', …

您好，感谢您阅读我的问题！我正在使用 Vue.js、Vuetify 和 v-data-table，并且我正在努力使我的 v-slot 使用两个不同的字符串作为标头的名称。

<template>
  <v-container fluid>
    <v-data-table
      :options="data"
      :headers="headers"
      :items="data
      :server-items-length="40"
      :loading="loading"
      :multi-sort="true"
      @update:options="updateThePage"
    >
      <template v-slot:[`header.overalls`]="{ header }" class="flight-date-header">
        <overallDatePicker
          :options="data"
        />
        {{ header.name }}
      </template>

      <template v-slot:[`item.name`]="{ item }">
        <p class="company-name">
          {{ item.companyName }}
        </p>
      </template>

      <template v-slot:[`item.price`]="{ item }">
          <p> {{ item.price }} </p>
      </template>

      <template v-slot:[`item.flightDate`]="{ item }">
        <p class="style">
          {{ item.startDate }}
        </p>
      </template>

    </v-data-table>
  </v-container>
</template>

我像下面一样存储我的标题

headers: [
      { text: 'Campaign Name', value: 'overalls' },
    ],

理想情况下我想要这个插槽的名称

<template v-slot:[`header.overalls`]="{ header …