小编Phi*_*ine的帖子

我不知道如何添加addEventListener在 Vue 3.x 中向父级添加 an 。

我发现您可以使用以下代码获取父级：

import { getCurrentInstance, onMounted } from 'vue'

onMounted(() => {
    console.log(getCurrentInstance().parent)
})

但我怎样才能得到HTML- 元素以便将侦听器添加到其中？

我目前正在尝试将我的代码从 Vue 2.x 迁移到 Vue 3.x。

在 Vue 2.x 中，您可以轻松地将 EventListener 添加到特定元素：

mounted() {
    this.$el.addEventListener('scroll', throttle(this.handleScroll, 50));
},
beforeDestroy() {
    this.$el.removeEventListener('scroll', throttle(this.handleScroll, 15));
},

非常重要：我不想将侦听器添加到浏览器的window元素或元素中。document

我想知道特定元素的滚动状态。浏览器的滚动状态甚至可能没有移动。看看这张图片：

如您所见，您只能在看到占位符文本的 div 框中滚动。

现在我的问题是：

我用来swiper.js生成许多彼此相邻的幻灯片。

代码的结构如下所示：

<SwiperWrapper>
    <SwiperSlide> 
        <FirstSlide />
    </SwiperSlide>
    <SwiperSlide>
        <SecondSlide />
    </SwiperSlide>
    <SwiperSlide>
        <ThirdSlide />
    </SwiperSlide>
</SwiperWrapper>

<SwiperSlide> …

在 package.json 中，我看到这一行：“vue”：“^2.1.10”，但是在执行 npm update 时我看到：vue@2.5.13。

我的 Laravel 应用程序中安装了哪个 Vue 版本？有没有另一种方式可以看到它？

如果 Vue 仍在 2.1.10 上，您将如何将其更新到 2.5.13 版？

首先，我向您展示有效的方法（在App.js中）

import router from './routes.js'; 
import VueI18n from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})


const app = new Vue({
        el: '#app',
        router,
        i18n
});

但是如果我想分离lang.js中的代码

import VueI18n from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

export default new VueI18n({
   locale: 'en', …

在我的组件shoppingCart.vue文件中,我正在调用一个简单的方法:

saveCart : _.debounce(() => {
            console.log('hi');
        }, 2000),

但我得到错误:未捕获的ReferenceError:_未定义.

现在得到有趣的部分.如果我将功能更改为例如:

saveCart(){
   console.log(_.random(0, 5));
}

一切都有效,我得到了例子:4.为了使它更有趣,我有一些其他组件正在使用_.debounce,例如搜索用户:

findUsers: _.debounce(
     function (term) 
     {
        let vm = this;
        axios.get('/search', { params: { user: term }})
            .then(response => {
                vm.updateResult(response.data);
            });
    }
  ,500),

它完美无缺.

所以这里有一些背景信息给你.我想我猜测问题在哪里,但我不确定:我正在使用Laravel,我通过bootstrap.js导入Lodash

window._ = require('lodash');

我的组件shoppingCart.vue由Buying.vue调用.Buying.vue被称为

export default new VueRouter({
   mode: 'history',
   routes: [
      {
        path: '/:user/:title',
        component: require('./views/buying/Buying'),
      },
   ],
});

也许问题出在某处,因为vue路由器？但我试图制作一个jsfiddle http://jsfiddle.net/gnu5gq3k/,但我的例子适用于这种情况......在我的现实生活中,test2创建了问题......

可能是什么问题呢？你需要什么样的信息才能更好地理解我的问题？

编辑 我必须做一些我看不到的简单错误:我将代码更改为:

debounce(func, wait, immediate) {

        var timeout;
        return function() {
            var context …

所以我想调整生日的自动填充命名。然而，这会导致几个问题。现在我需要找出是否可以强制 vee-validate 更改字段的名称。

为了更好地理解它。这是它目前的样子：

<select
    v-model="day"
    id="day"
    name="day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="'required|excluded:0'"
>
    <option
        :disabled="true"
        value="0"
        v-text="trans('food.Day')"
    />
    <option
        v-for="n in 31"
        :key="n"
        :value="n"
        v-text="n"
    />
</select>

<span
    class="bar"
    :class="{'invalid' : errors.has('day')}"
/>

选择字段的名称是“day”。然而，根据this，它应该被命名为：“bday-day”。

由于我使用的是 vee-validate，这会导致将字段名称重命名为“bday-day”。现在errors.has('day')}不能用了。

但即使我将其更改为errors.has('bday-day')，我也无法使用我的内部观察器来更改值。我收到错误：

观看路径失败：“bday-day” Watcher 只接受简单的点分隔路径。要完全控制，请改用函数。

这是因为我必须强制 v-model 名称和 vee-validate 名称使用相同的名称。v-model="bday-day"不能工作。

使其简短。我的最终目标是这样的：

<select
    v-model="day"
    id="day"
    name="bday-day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="{required: true, excluded: 0, name: 'day'}"
>
    <option
        :disabled="true"
        value="0"
        v-text="trans('food.Day')"
    />
    <option
        v-for="n in 31"
        :key="n"
        :value="n" …

我有一个问题，我需要为我的设置 json 列设置一些值。

假设我的用户迁移文件中有这个：

$table->json('settings');

我的目标是将这些值设置为默认值：

'settings' => json_encode([
    'mail' => [
        'hasNewsletter' => false
    ],
    'time' => [
        'timezone' => ''
    ]
])

你会怎么做？

我的第一种方法是created在用户创建后的事件中设置我的 UserObserver 中的值。

这会产生问题，即我的 UserFactory 无法正常工作。因为创建了一个用户，但设置值再次被 UserObserver 覆盖......