标签: vue-directives

我是 Vue 框架的新手。我的要求是在输入框中添加货币格式。

格式：
\n我需要在焦点移出时添加带有两个零的小数，并在焦点移入时删除零。 v-modal 值不应更改，因为此格式仅用于用户显示。

我发现这个解决方案非常接近我的要求：https ://jsfiddle.net/mani04/w6oo9b6j 。只有两件事我无法实现。

我想像这样使用它：

<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric\xe2\x80\x9d ></my-currency-input>\n

\n
1. 我添加了 vee-validate.js 库来验证整个表单。那么在这个例子中我该如何使用 v-validate 呢？
\n
2. 我不想修整我的弦。我们只需要添加和删除 (.00) \n这里，如果用户输入 35.7896，则将其变为 35.79。对于我的要求，它应该保留 35.7896，因为它已经有小数了。仅当用户输入数字时才添加小数点。
\n

我怎样才能做到这一点？我应该为此使用 Vue 指令吗？

https://jsfiddle.net/mani04/w6oo9b6j/

我想要这样的东西

<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric\xe2\x80\x9d ></my-currency-input>\n

我正在开发一个具有不同许可证类型的应用程序，根据许可证我们需要禁用/启用输入。

一种方法是:disabled为每个输入设置一个条件，但这需要大量工作并且容易出错，因为我们可能会忘记将它放在某些输入上。

我想过使用这样的指令v-disable-all来搜索容器下的所有输入并将其添加为禁用。

我在徘徊是否有更好的解决方案，或者是否已经有这样的解决方案？

在 Vue JS 中实现文本字符限制的最佳方法是什么？我希望使用 RegExp 来实现，这样用户就不会被允许在字段中输入符号。

背景

我按照本指南创建了一个自定义指令（以检测元素外部的点击）：https: //tahazsh.com/detect-outside-click-in-vue。

元素：

<button\n id=\'burger\'\n ref=\'burger\'\n class=\'burger button is-white\'>\n <span class=\'burger-top\' aria-hidden=\'true\' style=\'pointer-events: none;\'></span>\n\n <span class=\'burger-bottom\' aria-hidden=\'true\' style=\'pointer-events: none;\'></span>\n</button>\n

指示：

import Vue from \'vue\';\n\nlet handleOutsideClick;\n\nVue.directive(\'outside\', {\n  bind(el, binding, vnode) {\n    setTimeout(() => {\n      handleOutsideClick = (e) => {\n        e.stopPropagation();\n\n        const { handler, exclude } = binding.value;\n\n        let clickedOnExcludedEl = false;\n\n        exclude.forEach((refName) => {\n          if (!clickedOnExcludedEl) {\n            const excludedEl = vnode.context.$refs[refName]\n            console.log(vnode.context.$refs);\n            clickedOnExcludedEl = excludedEl.contains(e.target);\n          }\n        });\n\n        if (!el.contains(e.target) && !clickedOnExcludedEl) {\n          vnode.context[handler]();\n        }\n …

我想实现https://github.com/jackocnr/intl-tel-input用vuejs2。

如果我在一个 jQuery 里面添加document.ready，$('#phone').intlTelInput({ options...})

一切都按预期工作，但是当我尝试获取输入字段的值和一些boolean有效属性时，我总是检查值落后一步。

我的检查方法如下：

    validatePhoneNumber: function() {
        var validPhoneNo = $("#phone").intlTelInput("isValidNumber");
        var phoneNo = $("#phone").intlTelInput("getNumber");
        console.log(phoneNo + ' -> ' + validPhoneNo); //this line returns values one step behind
        bus.$emit('validate-phone', validPhoneNo)
    }

HTML：

<input class="form-control" @keydown="validatePhoneNumber" :class="{validInput: validPhone }" type="text" name="phone" value="" id="phone" :phone_number="phone_number">

我相信解决方案是为此问题创建一个新指令，我尝试了以下操作：

删除，我实例化的部分intlTelInput上document.ready，并做出这个：

Vue.directive('telinput', {
    bind: function(el) {
        $(el).intlTelInput({
            //options here...
    }
});

并添加v-telinput到我HTML上面的代码中。

有了这个，似乎没有任何效果。

我在那里缺少什么？

我在 Vue.js 中的 v-if 中使用的计算属性上遇到了麻烦。找不到解决或重构此问题的方法。一些指示将受到欢迎。

上下文：我显示数组（使用 Axios 生成）中的各种元素，并且在模板的每个 div 中，我获取该数组的一个元素的值。它工作没有任何问题。

问题：数组的某些元素是空的，对于这些元素，我想要么不显示任何内容，要么在某些情况下显示具有通用内容的替代 div。这就是我遇到问题的地方。我使用计算属性来检查数组的元素是否为空。然后我在 v-if 中使用这个计算结果。

代码：（替换内容就是这种情况）

methods: {
    getItem() {
          axios.get('http://4.4.4.4/api/table?&filter[where][name]=' + this.txtInput).then(response => {
            this.items = response.data
          })
    this.txtInput=''
    } 
} 

计算属性的灵感来自于这里的第二个答案）：

computed: {
 nonNullArticle: function() {
      return this.items.filter(i => i.article !== null)
    }    
}

并在模板中：

<div v-if="nonNullArticle">
    <div v-for="item in nonNullArticle">{{ item.article }}</div>
</div>

<div v-else>
    <p>alternate content</p>
</div>

在指令绑定方法中，有一个 vnode.context.$watch并且每次将该指令添加到 HTML 时，它还会添加另一个具有先前观察者的观察者。因为同样的观察者不止一次地打电话。

当指令 unbind 方法被调用时，有什么方法可以破坏以前的观察者。

Vue.directive("dynamic-lookup", {
    bind: function (el, binding, vnode) {        
        let dependency = setValue("dynamic-lookup-dependency");       
        if (dependency) {
            vnode.context.$watch(dependency, function (newVal, oldVal) { }); });
        }
    },
    unbind: function(el, binding, vnode) {
        console.log("unbind");
    }
});

我正在使用这个Weather API构建一个天气应用程序。我正在尝试添加一个<input>字段值，当它更改城市名称时，然后更新其他值预测。

我创建了<input>更新城市值的字段，它应该相应地更新天气预报。我知道它v-model正在工作，但是它不会改变数据结果。仅当我在数据中硬编码不同的城市时，Vue-instance才会更新更改。

<template>
  <div class="home">
    <h1>{{ msg }}</h1>
    <p>A weather app built Vuejs & Open Weather App. Made by Manuel Abascal</p>
    <input type="text" v-model.lazy="currentWeather.name">
    <div class="forecast">
     <div v-if="this.currentWeather">
      <!-- Forecast stat values -->
      <h2>Right now:</h2>
      <div><strong>City:</strong> {{ currentCity }}</div>
      <div><strong>Longitude: </strong> {{ currentWeather.coord.lon }}</div>
      <div><strong>Latitude: </strong> {{ currentWeather.coord.lat }}</div>
      <div><strong>Weather condition </strong> {{ currentWeather.weather[0].description }}</div>
      <div><strong>Temperature Mid: </strong> {{  currentWeather.main.temp }} Farenheit</div>
      <div><strong>Temperature Max: </strong> {{  currentWeather.main.temp_max}} Farenheit</div>
      <div><strong>Temperature …

<template>
  <div>
    <div class="text-center my-3">
      <b-button
        v-b-popover.hover="'I am popover content!'"
        title="Popover Title"
        >Hover Me</b-button
      >
    </div>
  </div>
</template>

<script>
import { VBPopover } from "bootstrap-vue";
export default{
  directives: {
    VBPopover
  },
}
<script>

所以我不确定为什么会收到此警告。如果我将 vb-popover.hover 替换为 b-popover.hover，此警告就会消失，但功能不存在。

基本上尝试实现文档中的 popover 指令： https: //bootstrap-vue.org/docs/directives/popover

基于这个问题检测点击外界因素而这个答案/sf/answers/2967248651/，我想该指令从Vue的2迁移到Vue公司3似乎binding.expression并vnode.context没有存在更多。我怎样才能让它工作？

app.directive('click-outside', {
    beforeMount (el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
            if (!(el === event.target || el.contains(event.target))) {
                vnode.context[binding.expression](event);
            }
        };
        document.body.addEventListener('click', el.clickOutsideEvent);
    },
    unmounted (el) {
        document.body.removeEventListener('click', el.clickOutsideEvent);
    }
});