Question

我输入没有任何Vue指令：

<input type="text" id="name" />

现在我正在构建一个自定义Vue组件，它接受一个名为input的参数，该参数应该是该输入的DOM选择器：

<component input="#name"></component>

现在我想根据输入的值在组件模板中切换一个类，类似于表单输入绑定。但是，由于我们在组件内，我猜不能使用模型绑定。所以我尝试创建一个计算属性：

<template>
    <div v-bind:class="[inputValue ? 'active' : '']"></div>
</template>

<script>
    module.exports = {
        props: [
            'input'
        ],
        computed: {
            inputValue: function () {
                return $(this.input).val();
            }
        }
    }
</script>

不幸的是，这不起作用。任何人都知道在此组件中观察“外部”输入值的变通方法吗？

（注意：为简洁起见，省略了该组件的主要功能）

Answer 1

MVVM旨在阻止您通过id直接访问DOM对象，而不是将它们绑定到模型数据：

<input type="text" v-model="name" />
...
<script type="text/javascript">
new Vue({
  data: {
     name: ""
   }
});
</script>

然后，您可以将数据作为道具传递给组件：

<component :input="name"></component>

现在你有了数据，你可以用它来代替：

<template>
    <div v-bind:class="[isActive() ? 'active' : '']"></div>
</template>

...
methods: {
   isActive : function() {
     return this.input;
   }
}
...

修改

我只是想指出，我只是简单地用return this.input;跟随你的例子，但除非你将值转换为boolean，否则这实际上是行不通的。最好确保只从函数中返回true或false：

isActive : function() { return (this.input == "") ? false: true; }

根据ID

1 个答案: