ul /li(列表)在 vue js 自动完成组件中没有刷新或更新?
ul /li (list) not refreshing or updating in vue js autocomplete component?
所以我在 vue js 中创建了一个新的自动完成组件。(参见下面的代码)
main.js-
Vue.component('g-autocomplete', {
props: ['value','title'],
mixins: [viewMixin('g-autocomplete')],
data() {
return {
input: ''
}
},
template: ` <div class="autocomplete">
<input style="font-size: 12pt; height: 36px; width:1800px; " type="text" v-model="input" @input="handleInput"/>
<ul >
<li v-for="(item, i) in filteredResults" :key="i" @click="setInput(item)" >
<!-- {{ autocompleteData }} -->
<template v-if="title!='manager'">
<div class="container">
<p>
<b>ID:</b>
{{item.id}}
</p>
<p>
<b>Description:</b>
{{item.description}}
</p>
</div>
</template>
<template v-else>
<div class="container">
<p>
<b>ID:</b>
{{item.id}}
</p>
<p>
<b>First Name:</b>
{{item.firstName}}
</p>
<p>
<b>Last Name:</b>
{{item.lastName}}
</p>
</div>
</template>
</li>
</ul>
</div>`,
methods: {
handleInput(e) {
console.log('inside handleInput')
this.$emit('input', e.target.value)
},
setInput(value) {
console.log('inside setInput')
this.input = value
this.$emit('click', value)
},
},
watch: {
$props: {
immediate: true,
deep: true,
handler(newValue, oldValue) {
console.log('new value is'+newValue)
console.log('old value is'+oldValue)
console.log('value inside handler'+this.value)
// console.log('list inside handler'+this.list)
console.log('title inside handler'+this.title)
this.input=newValue.value
}
}
// msg(newVal) {
// this.msgCopy = newVal;
// }
}
})
'filteredResults' 数组声明在viewmixin.js like-
export const viewMixin = (viewName) => {
return {
data() {
return {
filteredResults: [],
show:false,
}
},
computed:
{
viewData() {
return this.$store.getters.getViewData(viewName)
},
objectData() {
return this.$store.getters.getApiData(this.viewData.api_id).data
},
}
---
---
}
}
.vue 组件使用的文件
<b-field label="Custom Business Unit">
<g-autocomplete v-on:input="getAsyncDataBusinessUnit" v-on:click="(option) => {updateValue(option.id,'businessUnit')}" :value="this.objectData.businessUnit" title='businessUnit' >
</g-autocomplete>
</b-field>
getAsyncDataBusinessUnit 去抖动方法-
getAsyncDataBusinessUnit: debounce(function(name) {
console.log('1st line'+JSON.stringify(this.filteredResults))
console.log('inside getAsyncDataBusinessUnit ')
if (!name.length) {
this.show=false;
this.filteredResults = [];
return;
}
this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/businessunit/?filter={id} LIKE '%25${name}%25' OR {description} LIKE '%25${name}%25'`)
.then(response => {
this.filteredResults = [];
response.forEach(item => {
this.filteredResults.push(item);
});
this.show=true;
console.log('filtred results array is'+JSON.stringify(this.filteredResults))
})
.catch(error => {
this.filteredResults = [];
throw error;
})
.finally(() => {
this.isFetching = false;
});
}, 500),
注意:我在 debounce 函数中添加了一个控制台日志,我可以看到 filteredResults 数组在推送 operation.But 之后被填充,出于某种原因我看不到 ui 中的下拉列表我开始输入一些东西。我觉得 ui 中的列表不是 re-rendering/updating 因为在控制台日志中我可以看到数据,即。对象数组 'filteredResults'。所以我认为它仍在将 'filteredResults' 的旧值(初始值)作为空数组。 .请帮忙?
问题是mixin。看起来您的意图是让 g-autocomplete
组件与 b-field
组件共享对 filteredResults
数组的相同引用。您期望在 b-field
组件的 getAsyncDataBusinessUnit
方法中分配 this.filteredResults
时 g-autocomplete
组件将 re-render 由于更改为 filteredResults
在其模板中引用。
但是,作为 g-autocomplete
组件的 this.filteredResults
对 的引用与 [=13= 的 this.filteredResults
不同] 参考了!
这是因为 mixin 正在为其混入的每个组件创建一个新的 data
函数。每个新的 data
函数 returns 一个新的对象,其中一个新的 filteredResults
属性 指向一个新的空数组。
我建议删除此 mixin 并添加 filteredResults
作为 g-autocomplete 的 prop
。
这里有一个fiddle供大家参考。
Follow-up
每次修改 g-autocomplete
组件的 $props
对象时,您的 input
值都会重置。具体来说,watcher 中的 this.input=newValue.value
行将 input
的值设置为 parent 中 objectData.businessUnit
的值。您没有将 how/when objectData.businessUnit
分配给,但是由于您告诉我们您的输入值已重置,我可以得出结论 objectData.businessUnit
在 input
事件从 g-autocomplete
组件发出。
我不完全确定为什么你有 $props
观察者;可能是设置input
模型的初始值。无论如何,防止 input
重置的关键是从观察者中删除 this.input=newValue.value
行。如果你想根据 value
属性设置 input
的初始值,你可以在 g-autocomplete
的 created
钩子中这样做——它只会在组件的生命周期,在创建时。 (此举可能意味着您可以完全删除 $props
观察者。
要添加到 g-autocomplete
组件的代码为:
created() {
this.input=this.value;
}
Here 是一个新的 fiddle.
所以我在 vue js 中创建了一个新的自动完成组件。(参见下面的代码)
main.js-
Vue.component('g-autocomplete', {
props: ['value','title'],
mixins: [viewMixin('g-autocomplete')],
data() {
return {
input: ''
}
},
template: ` <div class="autocomplete">
<input style="font-size: 12pt; height: 36px; width:1800px; " type="text" v-model="input" @input="handleInput"/>
<ul >
<li v-for="(item, i) in filteredResults" :key="i" @click="setInput(item)" >
<!-- {{ autocompleteData }} -->
<template v-if="title!='manager'">
<div class="container">
<p>
<b>ID:</b>
{{item.id}}
</p>
<p>
<b>Description:</b>
{{item.description}}
</p>
</div>
</template>
<template v-else>
<div class="container">
<p>
<b>ID:</b>
{{item.id}}
</p>
<p>
<b>First Name:</b>
{{item.firstName}}
</p>
<p>
<b>Last Name:</b>
{{item.lastName}}
</p>
</div>
</template>
</li>
</ul>
</div>`,
methods: {
handleInput(e) {
console.log('inside handleInput')
this.$emit('input', e.target.value)
},
setInput(value) {
console.log('inside setInput')
this.input = value
this.$emit('click', value)
},
},
watch: {
$props: {
immediate: true,
deep: true,
handler(newValue, oldValue) {
console.log('new value is'+newValue)
console.log('old value is'+oldValue)
console.log('value inside handler'+this.value)
// console.log('list inside handler'+this.list)
console.log('title inside handler'+this.title)
this.input=newValue.value
}
}
// msg(newVal) {
// this.msgCopy = newVal;
// }
}
})
'filteredResults' 数组声明在viewmixin.js like-
export const viewMixin = (viewName) => {
return {
data() {
return {
filteredResults: [],
show:false,
}
},
computed:
{
viewData() {
return this.$store.getters.getViewData(viewName)
},
objectData() {
return this.$store.getters.getApiData(this.viewData.api_id).data
},
}
---
---
}
}
.vue 组件使用的文件
<b-field label="Custom Business Unit">
<g-autocomplete v-on:input="getAsyncDataBusinessUnit" v-on:click="(option) => {updateValue(option.id,'businessUnit')}" :value="this.objectData.businessUnit" title='businessUnit' >
</g-autocomplete>
</b-field>
getAsyncDataBusinessUnit 去抖动方法-
getAsyncDataBusinessUnit: debounce(function(name) {
console.log('1st line'+JSON.stringify(this.filteredResults))
console.log('inside getAsyncDataBusinessUnit ')
if (!name.length) {
this.show=false;
this.filteredResults = [];
return;
}
this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/businessunit/?filter={id} LIKE '%25${name}%25' OR {description} LIKE '%25${name}%25'`)
.then(response => {
this.filteredResults = [];
response.forEach(item => {
this.filteredResults.push(item);
});
this.show=true;
console.log('filtred results array is'+JSON.stringify(this.filteredResults))
})
.catch(error => {
this.filteredResults = [];
throw error;
})
.finally(() => {
this.isFetching = false;
});
}, 500),
注意:我在 debounce 函数中添加了一个控制台日志,我可以看到 filteredResults 数组在推送 operation.But 之后被填充,出于某种原因我看不到 ui 中的下拉列表我开始输入一些东西。我觉得 ui 中的列表不是 re-rendering/updating 因为在控制台日志中我可以看到数据,即。对象数组 'filteredResults'。所以我认为它仍在将 'filteredResults' 的旧值(初始值)作为空数组。 .请帮忙?
问题是mixin。看起来您的意图是让 g-autocomplete
组件与 b-field
组件共享对 filteredResults
数组的相同引用。您期望在 b-field
组件的 getAsyncDataBusinessUnit
方法中分配 this.filteredResults
时 g-autocomplete
组件将 re-render 由于更改为 filteredResults
在其模板中引用。
但是,作为 g-autocomplete
组件的 this.filteredResults
对 的引用与 [=13= 的 this.filteredResults
不同] 参考了!
这是因为 mixin 正在为其混入的每个组件创建一个新的 data
函数。每个新的 data
函数 returns 一个新的对象,其中一个新的 filteredResults
属性 指向一个新的空数组。
我建议删除此 mixin 并添加 filteredResults
作为 g-autocomplete 的 prop
。
这里有一个fiddle供大家参考。
Follow-up
每次修改 g-autocomplete
组件的 $props
对象时,您的 input
值都会重置。具体来说,watcher 中的 this.input=newValue.value
行将 input
的值设置为 parent 中 objectData.businessUnit
的值。您没有将 how/when objectData.businessUnit
分配给,但是由于您告诉我们您的输入值已重置,我可以得出结论 objectData.businessUnit
在 input
事件从 g-autocomplete
组件发出。
我不完全确定为什么你有 $props
观察者;可能是设置input
模型的初始值。无论如何,防止 input
重置的关键是从观察者中删除 this.input=newValue.value
行。如果你想根据 value
属性设置 input
的初始值,你可以在 g-autocomplete
的 created
钩子中这样做——它只会在组件的生命周期,在创建时。 (此举可能意味着您可以完全删除 $props
观察者。
要添加到 g-autocomplete
组件的代码为:
created() {
this.input=this.value;
}
Here 是一个新的 fiddle.