根据 ID 动态创建 Vue 模型

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;，但除非您将值转换为布尔值，否则这实际上不起作用。最好确保你只从函数中返回 true 或 false：

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