Question

是否可以对vue.js中的输入进行双向计算？我的数据以英寸为单位，并且必须以英寸为单位。我想在输入框中将数据转换为其他单位，并且在用户输入一些值后必须将其转换回英寸。

<input :value="someCrazyBidirectionalCalculation(dataInInches)">

后续问题：

我按照指南在vue.js v2中进行了双向过滤

<v-unit-input label="Height" v-model="parameters.height"></v-unit-input>


Vue.component('v-unit-input', {
    template:
    '<v-text-field ref="input" :label="label" type="number" suffix="mm" :value="value" @input="toInch($event.target.value)" @blur="toMm"></v-text-field>',
    props: {
        value: {
            type: Number,
            default: 0
        },
        label: {
            type: String,
            default: ''
        }
    },
    mounted: function () {
        this.toMm()
    },
    methods: {
        toInch: function (value) {
            this.$emit('input', this.value / 25.4)
        },
        toMm: function () {
            this.$refs.input.value = this.value * 25.4
        },
    }
})

将数据从后端发送到输入时，它确实起作用，但是更改输入会出现此错误：

[Vue警告]：事件处理程序中“输入”错误：“ TypeError：无法读取未定义的属性'value'”

编辑2：

似乎$ event.target.value是问题所在。我的值存储在$ event中。来自后端的数据从英寸转换为毫米，当输入以毫米为单位的数据时，它转换回英寸，但是当我按数字时，它也以英寸显示。可以仅以毫米显示吗？

Answer 1

我建议您使用过滤器，但不要在相同的输入中使用，也许您可以将结果放在输入之后的英寸上。

<input v-model="number">
<label>{{ number | inches }}</label>

致谢！

Answer 2

终于可以了。

'Expression
=Fields!AgeGroups.Value

'Format
String

'Operator
=

'Value
16-18

vue.js输入值的双向计算

2 个答案: