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

Question

我是 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: {
},
});

Answer 1

这是因为stops不在您的 Vue 数据 object 中，因此它无法对更改做出反应。 将加载逻辑移到mounted方法中，在数据object中添加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: {
  },
});