我在Vue模板中有一个简单的输入框,我想或多或少地使用debounce:
<input type="text" v-model="filterKey" debounce="500">
但是,该debounce物业已在Vue 2中弃用.该建议仅说:"使用v-on:输入+第三方去抖功能".
你是如何正确实现它的？
我试图使用lodash,v-on:input和v-model来实现它,但我想知道是否可以不使用额外的变量.
在模板中:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
在脚本中:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
然后在computed道具中使用filterkey .
我想更新一些输入字段
所以我创建了一个输入元素：
new Vue({
el: '#app',
data: {
record: {
email: 'example@email.com'
},
editing: {
form: {}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" :value="record.email" v-model="editing.form.email">
<pre>{{ editing.form.email }}</pre>
</div>在此输入元素中，我添加了:valueattr 和v-model
不幸的是我收到一个错误：
与同一元素上的 v-model 冲突，因为后者已经在内部扩展为值绑定
用数据填充输入字段然后更新它的最佳解决方案是什么？
我还尝试添加 :name="..." 而不是 :value="..."
我的应用程序使用以下类型的数据:有些公司每个都有一个数据点列表.每个数据点都有一个类型,每个公司只能有一个每种类型的数据点.
+Company_1
|
|--Datapoint_1 : type_1
|--Datapoint_2 : type_2
|--Datapoint_3 : type_3
|
|
+Company_2
|
|--Datapoint_4 : type_3
|--Datapoint_5 : type_2
|
|+Company_3
|
|--Datapoint_6 : type_2
...
...
总共有大约1000个数据点和20个公司.该应用程序根据这些数据点计算分析,目标是允许用户操作这些数据点,以便查看给定方案中的结果.在任何给定时刻,都有一个"selected_company"和"selected_type",并且基于这两个选择,应该选择正确的数据点进行操作.
我意识到,如果"公司"变量和"数据点"属性是数组,则必须对所有项进行搜索才能找到正确的项.因此,我选择将它们作为对象:
companies = {
'1' : {
name : 'Company_1',
datapoints : {
'type_1' : { ... },
'type_2' : { ... },
'type_3' : { ... }
}
},
'2' : {...},
'3' : {...},
.
.
.
}
问题:
我有一个'datapoint'组件,我将数据点作为道具传递:
<datum-comp :datum="companies[selected_company].datapoints[selected_type]"></datum-comp>
在这个组件中,我有一个输入,用于操作数据点的score属性:
<input v-model.number="datum.score" class="form-control">
但是,这种输入表现出非常奇怪的行为.当我输入输入时,模型不会立即更新.相反,Vue似乎在等待我在更新模型之前从输入(onBlur)更改焦点. …
// This doesn't work
<input type='date' v-model='store.myDateObject'>
如何将日期输入绑定到我商店中的日期对象？
我尝试创建默认标记的“v-checkbox”条目，而不使用 v-model 指令。
在这个 Vuetify 组件的官方文档中，我找不到有关如何执行此操作的信息。
我尝试放置此代码，但它不起作用
<v-checkbox checked="true"></v-checkbox>
<v-checkbox checked="checked"></v-checkbox>
<v-checkbox checked></v-checkbox>
我有一个计算过的二传手：
rating: {
get() {
return this.$store.state.rating;
},
set(value) {
console.log(value);
this.$store.commit('updateFilter', {
name: this.name,
value
});
}
}
这与我的评分相关，如下所示：
<label>
<input type="checkbox" :value="Number(value)" v-model="rating">
{{ index }}
</label>
我希望计算的 setter 记录一个数组，因为当我使用观察者观察评级模型的变化时，我得到了一个数组。
除非我使用像上面这样的计算设置器，它只会true在选中复选框或false取消选中复选框时输出。
这里发生了什么，我应该像观察者一样获得一个数组吗？