标签: vue-directives

在文档中，它指出您可以将各种参数传递给指令。

所以我想传入一个值：

v-my-directive="test"

但我收到错误：

Property or method "test" is not defined on the instance but referenced during render

如何将字符串传递给指令？

我正在尝试制作一个可重用的 vue 单选按钮组件，该组件将采用变量名称和包含标签和值的对象，然后使用 v-for 呈现单选按钮列表。

我在每一半问题上都取得了成功，但没有设法将它们结合起来：

1. 我可以将一组单选按钮绑定到数据模型，其中按钮在模板中静态定义，但我不知道如何使列表动态化。这是代码：

//component
const Radio = {
	template: '#test',
  prop: ['value'],
  data () {
    return {
      selected: this.value
    }
  },
  model: {
	  prop: 'value',
      event: 'change'
  },
  methods: {
    handleClickInput (e) {
      this.$emit('change', this.selected)
    }
  }
}

//app
var app2 = new Vue({
  el: '#app2',
  data: { 	
  		door: '',
			doorOptions: {
				'Yes': 1,
				'No': 0,
			}
	},
  components: { Radio, }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app2">
  <radio v-model="door"></radio>
  <p>
    door = {{door}}
  </p>
</div>


<template …

我按照自定义指令的指南在 Vue.js 3 中创建自定义指令。我创建了一个指令来更改元素的背景。

Home.vue包括自定义指令的使用以及main.js自定义指令的定义。

“首页.vue”

<template>
    <p v-highlight="yellow">Home</p>
</template>

“main.js”

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.mount('#app');
app.directive("highlight",{
    beforeMount(el, binding){
        el.style.background = binding.value
    }
});

但我在控制台中收到以下错误：

“无法读取未定义的‘创建’属性”

有人帮助我吗？

我想验证文本字段，尝试下面的代码：

 <input v-validate="result.val=='Required' ? 'required' : ''" v-model="required" :name="f_name" type="text"/>

但出现此错误：

app.js:48089 [Vue warn]: 无法解析指令：验证

尝试这个：

<ValidationProvider name="phone" :rules="required" v-slot="{ errors }">
  <input class="form-control" :name="phone" type="text" v-model="form.phone"/>
  </ValidationProvider>

我正在尝试创建一个自定义指令来在单击元素时执行函数。我无法让它工作，我查看了自定义指令的文档，甚至直接从那里复制示例也不起作用。

我正在使用单个文件模板和本地指令。这是模板：

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <button v-test:click="clicked">Click me</button>
      </div>
    </div>
  </div>
</template>

这是脚本：

<script>
  export default {
    name: 'App',
    components: {
    },
    directives: {
      test: {
        bind(el, binding) {
          const type = binding.arg;
          const fn = binding.value;
          el.addEventListener(type, fn)
        }
      }
    },
    methods: {
      clicked() {
        alert('text');
      }
    }
  }
</script>

我尝试过使用 Vue 3 语法（beforeMount 而不是绑定）以及全局指令，但这些东西似乎也不起作用。有谁知道我做错了什么？

如果我为传递给 的值提供括号，则一旦页面加载，警报框就会出现v-test。无论哪种方式，单击按钮时都不会发生任何事情。

我想问一个关于Vue自定义指令的问题。作为 Typescript 的粉丝，我想在类型支持的情况下使用此功能，但我在网络和聊天中都找不到任何解决方案。

<button v-clickOutside="myFunc"> Click Outside </button>

当我像这样编写代码并向 Vue 添加 clickOutside 指令时，它可以正常工作。然而clickOutside没有类型支持，没有自动完成支持，并且它被识别为any。

为了定义，我遵循了 Vue 的文档。

app.directive('clickOutside', (el, binding) => {
  // My code is here.
})

我正在尝试在 Vue JS 2 上设置自定义指令。但我收到了以下错误消息：

TypeError: Math.random(...).toString.slice is not a function

这是我在 main.js 上全局编写的指令：

Vue.directive('rainbow', {
  bind (el, binding, vnode) {
    el.style.color = '#' + Math.random().toString.slice(2, 8)
  }
})

这是我调用指令的地方

<h2 v-rainbow>Hello</h2>

我在网上到处搜索，但信息。任何帮助或建议都非常受欢迎。谢谢

我正在学习 Vuejs，我想知道 Vuejs 中混合的最佳实践是什么。以及 mixin 对象如何包含其他组件选项。

我希望我的指令作为 v-if 工作，因为在我的指令中我必须检查访问权限并销毁该元素（如果它没有访问权限）。

这是我的代码

Vue.directive('access',  {
    inserted: function(el, binding, vnode){

        //check access

        if(hasAccess){
           vnode.elm.parentElement.removeChild(vnode.elm);
        }
    },

});

vue 文件

<my-component v-access='{param: 'param'}'>

问题是我将此指令应用于组件，它删除该组件，但不删除创建/安装的挂钩调用的函数的执行。

在组件（my-component）中，mounted/created 钩子中有函数。这些函数执行完毕，我不想再执行这些函数了。有没有办法停止执行已安装/创建的事件？

我正在使用vue-masonry 插件，它可以让我轻松创建砌体网格。

我创建了一个无限加载的系统，您可以滚动到页面底部，并将新图片附加到与 vue-masonry 插件绑定的数组中。

当我创建一个轮询其他用户上传的新图片的系统时，出现了问题。这些新图片需要位于砌体网格的顶部。

该插件使用两个 Vue 指令masonry（父）和masonryTile（元素）。masonryTile有一个 v-for 循环遍历与我的 Vue 实例绑定的数组（它完成所有繁重的工作，预加载，清理等......）。

指令中有没有办法知道附加或前置的内容之间的差异？并尝试做出不同的反应（我知道砌体有一些追加/前置方法），但是在这里和使用这个插件，已经添加的项目（在开始时，所以前置可以与Vue一起使用），但没有砌体交互，也没有重绘（我尝试过）使用原型来触发重绘this.$redrawVueMasonry();）。

所以我不知道下一步该做什么。继续寻找一种方法来区分前置和附加并尝试将其绑定到各自的砌体方法？或者还有一个我没想到的方法...

预先感谢您的帮助

Ps：我认为我的代码并不真正相关，因为它更多的是优化插件的一种方法。如果您想要我的代码的某些特定部分，请在评论中告诉我！

我刚刚遇到了一个与 Vue 指令中的事件监听相关的问题。我有一个组件，其中包含以下代码：

function setHeaderWrapperHeight() { ... }
function scrollEventHandler() { ... }

export default {
  ...
  directives: {
    fox: {
      inserted(el, binding, vnode) {
        setHeaderWrapperHeight(el);
        el.classList.add('header__unfixed');
        window.addEventListener(
          'scroll',
          scrollEventListener.bind(null, el, binding.arg)
        );
        window.addEventListener(
          'resize',
          setHeaderWrapperHeight.bind(null, el)
        );
      },
      unbind(el, binding) {
        console.log('Unbound');
        window.removeEventListener('scroll', scrollEventListener);
        window.removeEventListener('resize', setHeaderWrapperHeight);
      }
    }
  }
  ...
}

每次更改路由器路径时都会重新渲染此组件，我通过将当前路由路径分配给:keyprop来实现此行为，因此每当路径更改时，它都会重新渲染。但问题是事件侦听器没有被删除/销毁，导致了可怕的性能问题。那么如何删除事件侦听器呢？