我必须在计算中使用 v-model，否则计算不返回值答案

【问题标题】：I have to use v-model in computed, otherwise computed doesn't return a value我必须在计算中使用 v-model，否则计算不返回值
【发布时间】：2022-02-05 23:17:02
【问题描述】：

我是 JS/Vue 的新手。我正在尝试进行动态搜索输入。我正在过滤输入更改，过滤的是从我的 API 获取的对象数组。奇怪的是，除非我在返回之前使用this.term，否则计算方法不会返回任何数据，它可以是console.log() 或我的v-model 的任何其他内容。我错过了什么？

var stops = new Array();
  document.addEventListener("DOMContentLoaded", () => {
    fetch('http://localhost:8080/api/stops/')
      .then(response => response.json())
      .then((data) => {
        window.data = data;

        Object.keys(window.data).forEach(k => {
          stops.push(window.data[k]);
        });
      })
      .catch(err => {
        console.log(err);
      });

  });


  Vue.component('sidebar', {
delimiters: ['{(', ')}'],
data: () => {
  return {
    term: '',
  }
},
computed: {
  filtered() {

    <!--followng line needs to be here for the func to return data-- >
    this.term = this.term 

    return stops.filter(p => p.nameno.toLowerCase().includes(this.term.toLowerCase()));
  }

},
template:

  `
    <div id="sidebarContain" >
        <input id="sidebar-search" type="text" v-model="term" >

        <div v-for="tram in filtered" :key="tram.name">
            <span >{(tram.nameno)}</span>
            <span ></span>
        </div>
    </div>
`,
methods: {
},
});

【问题讨论】：

document.addEventListener("DOMContentLoaded" - 这绝不应该在 Vue 应用程序中发生，除非你知道自己在做什么。

标签： javascript vue.js dynamic filtering v-model

【解决方案1】：

这是因为stops 不在您的 Vue 数据对象中，所以它无法对更改做出反应。将加载逻辑移到mounted方法中，为数据对象添加stops属性，并在mounted方法中使用this.stops = ...设置：


Vue.component('sidebar', {
  delimiters: ['{(', ')}'],
  data: () => {
    return {
      term: '',
      stops: []
    }
  },
  computed: {
    filtered() {
      this.term = this.term 

      return this.stops.filter(p => p.nameno.toLowerCase().includes(this.term.toLowerCase()));
    }
  },
  mounted() {
    fetch('http://localhost:8080/api/stops/')
      .then(response => response.json())
      .then((data) => {
        window.data = data;

        Object.keys(data).forEach(k => {
          this.stops.push(data[k]);
        });
      })
      .catch(err => {
        console.log(err);
      });
  },
  template:
    `
      <div id="sidebarContain" >
          <input id="sidebar-search" type="text" v-model="term" >

          <div v-for="tram in filtered" :key="tram.name">
              <span >{(tram.nameno)}</span>
              <span ></span>
          </div>
      </div>
  `,
  methods: {
  },
});

【讨论】：