组件中的Vue过滤器答案

【问题标题】：Vue filter in component组件中的Vue过滤器
【发布时间】：2018-08-24 04:19:41
【问题描述】：

[Vue warn]: Property or method "onlyNumbers" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

<template>
<div class="category-info">
    <div v-for="input in inputs.text">
        <label >{{ input.placeholder}}</label>
        <input type="text"  id="location" :name="input.name" v-model="input.value | onlyNumbers" @change="inputChange">
    </div>
    <div class="select" v-for="select in inputs.select">
        <label >{{ select.placeholder }}</label>
        <my-select :data="select" v-model="select.value" @change="selectChange(select)"></my-select>
    </div>
</div>

大家好，我想从输入文本中过滤值，我以 2 种方式创建了过滤器，但一直都有这个错误，怎么办？

1 次尝试

Vue.filter('onlyNumbers',function (value) {

    return +value.replace(/[^\d.]/g, '');

});

2 次尝试

 export default {
    name: "profile-add-inputs",
    props: ['category'],
    data() {
        return {
            inputs: {
                text : {},
                select: {}
            },
        }
    },
    methods: {
        getCategories(){
         /////
       },
        selectChange(select){
            ///
        },
        inputChange(){
            /// some code what i have
        }
    },
    filters : {
        onlyNumbers: function (value) {

            return +value.replace(/[^\d.]/g, '');

        }
    },
    watch: {
        category : function () {
            this.getCategories();
        },
    }
}

但我总是有这个错误

我的错误是 add.js:32380 [Vue 警告]：属性或方法“onlyNumbers”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

【问题讨论】：

标签： filter vue.js vuejs2 vue-component

【解决方案1】：

另一种选择是验证 onchange 事件的输入

我为一个工作示例修改了您的代码：https://codesandbox.io/s/4rr9nv1p70

您可以在文件App.vue中找到它

【讨论】：

【解决方案2】：

请参阅this 以获取更多信息，了解您的过滤器为何不起作用。

然后参考this了解如何使用双向过滤器

【讨论】：