1 year ago

#385755

test-img

Turtlecode

Swiper in slot attributes are deprecated- eslint-plugin-vue

I try to solve navigation swiper in vue, and I found this article to solve it. However, there's a problem with slot, I know that vue3 has v-slot to replace this function, but I don't know how to write it. Here is the link to the article. https://blog.csdn.net/qq_41838215/article/details/109106235

Version:
vue : 3.2.31
vue-awesome-swiper: 5.0.0
swiper: 6.8.4
eslint: 8.12.0,

    <swiper
            ref="mySwiper"
            :options="swiperOption"
        >
            <swiper-slide v-for="(img, index) in images" :key="index">
                <img :src="require(`@/assets/picture/${img}.jpg`)"/>
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
            <div class="swiper-button-next" slot="button-next" @click="next"></div>


        </swiper>

Besides, I found this maybe eslint problem, so I wrote eslint with this article
ionic - `slot` attributes are deprecated - eslint-plugin-vue

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-deprecated-slot-attribute': 'off',
    "vetur.validation.template": false,
  }
}

Thanks for your helping.

vue.js

navigation

eslint

slot

swiper.js

0 Answers

Your Answer

Accepted video resources