ul /li（列表）在 vue js 自动完成组件中没有刷新或更新？

Question

所以我在 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' 的旧值（初始值）作为空数组。 .请帮忙？

Answer 1

问题是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.

ul /li（列表）在 vue js 自动完成组件中没有刷新或更新？

ul /li (list) not refreshing or updating in vue js autocomplete component?

html

vue.js

autocomplete

Follow-up