观看vue.js 3设置

发布于 2025-02-08 07:49:55 字数 541 浏览 1 评论 0原文

我已经将当前的vue.js代码更改为vue.js 3＆lt; script设置＆gt;代码，但是我对观看属性有问题。 观看 ＆lt; script设置＆gt;中的正确语法是什么？

当前代码：

  watch: {
    config: {
      handler(newConfig) {
        if (this.$refs && this.$refs.range && this.$refs.range.noUiSlider) {
          this.$refs.range.noUiSlider.destroy()
          const newSlider = this.noUiSliderInit(newConfig)
          return newSlider
        }
      },
      deep: true,
    },
  }

在＆lt;脚本设置中的外观应该如何？？

原文

I've to change my current Vue.js code to Vue.js 3 <script setup> code, but I've problem with the watch property. What is proper syntax for watch in <script setup>?

Current code:

  watch: {
    config: {
      handler(newConfig) {
        if (this.$refs && this.$refs.range && this.$refs.range.noUiSlider) {
          this.$refs.range.noUiSlider.destroy()
          const newSlider = this.noUiSliderInit(newConfig)
          return newSlider
        }
      },
      deep: true,
    },
  }

How should it look like in <script setup>?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

妞丶爷亲个 2025-02-15 07:49:55

vue.js以其出色的文档而闻名 -

基本上：

import {watch} from "vue";
//
//
//
watch(config, (newConfig) => {
    // Your code
}, { deep: true });

显然，“您的代码”将不同您当前拥有的内容，但是我认为您只需要使用观看而需要帮助。

即，所有this。*在构图API中显然有所不同（在其中您永远不会使用this）。

值得注意的是，当您直接在反应式对象上调用Watch（）时，它将隐含地创建一个深观察者 - 将在所有嵌套突变上触发回调：

-watcher在问题中，有这样的小型代码片段，很难说config是什么。

Vue.js is known for its excellent documentation - Watchers (make sure you select composition API).

Basically:

import {watch} from "vue";
//
//
//
watch(config, (newConfig) => {
    // Your code
}, { deep: true });

Obviously, "Your code" will be different to what you currently have, but I assume you only needed help with how to use watch.

i.e., all the this.* is obviously different in composition API (where you never use this).

It's worth noting that When you call watch() directly on a reactive object, it will implicitly create a deep watcher - the callback will be triggered on all nested mutations: Deep Watchers

So, you may not even need the deep:true option - of course with such a small code fragment in the question, it's hard to say what config is.

回复收藏 0 原文

划一舟意中人 2025-02-15 07:49:55

这样尝试。

import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      newSlider
    }
  },
  watch: {
    config: {
  handler(newConfig) {
    if (this.$refs && this.$refs.range && this.$refs.range.noUiSlider) {
      this.$refs.range.noUiSlider.destroy()
      const newSlider = this.noUiSliderInit(newConfig)
    }
  },
  deep: true,
},
  }
})

Try it like this.

import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      newSlider
    }
  },
  watch: {
    config: {
  handler(newConfig) {
    if (this.$refs && this.$refs.range && this.$refs.range.noUiSlider) {
      this.$refs.range.noUiSlider.destroy()
      const newSlider = this.noUiSliderInit(newConfig)
    }
  },
  deep: true,
},
  }
})

回复收藏 0 原文

~没有更多了~