时间戳

首页 > 解决方案 > 如何使用特定事件的 ajax 数据重新创建 vuejs 组合

ajax - 如何使用特定事件的 ajax 数据重新创建 vuejs 组合

问题描述

我是 vuejs 的新手。我想根据另一个选择重新加载组件项。示例：我想根据用户选择的标签/类别重新加载帖子列表。我该怎么做？我需要在哪里进行新的 ajax 调用？此外，ajax 调用与标签和类别不同。我认为created在页面加载时加载的简单组件之类的方法中添加 ajax 调用将无济于事。这个怎么做？谢谢

<template>
  <div>
    <div class="pt-2 pb-3">
        <input type="hidden" name="my_variable" v-model="myVar" @change="foo">
    </div>
  </div>
  </template>

<script>
export default {
  data() {
    return {
      myVar: null,
    };
  },
  methods: {
    submit: function(e) {},
    async foo() {
        console.log('foo', this.myVar);
    }
  }
};
</script>

标签： ajaxvue.jsvuejs2vue-component

解决方案

这取决于。如果您在组件的实例化中有标签/类别，那么是的，您可以在created生命周期中进行调用。

export default {
  data: () => ({
    options: []
  }),
  methods: {
    async getOptions(){
       const response = await axios.get('/items');

       this.options = response.data
    }
  }
}

如果您在创建组件时没有标签并且需要在用户选择类别时进行更改，您可以在用户更改选项时进行 ajax 调用：

<template>
  <select v-model="optionSelected" @change="getOptions">
    <option value="1">First Value</option>
    <option value="2">Second Value</option>
  </select>
</template>

<script>

export default {
  data: () => ({
    optionSelected: null,
    options: [],
  }),
  methods: {
     async getOptions(item) {
        const response = await axios.get('/items', { params: { filter: item } });
        
        this.options = response.data;
     }
  }
}

</script>

OP更新问题后编辑

当您有一个input时，每次用户输入内容时，浏览器都会发出一个名为input. 当你有一个select元素时，浏览器会发出一个名为change. 在这种情况下，由于您使用的是input我们应该使用@input而不是@change

<input type="hidden" name="my_variable" v-model="myVar" @input="foo">

你可以在这里阅读更多关于它的信息

除此之外，当您监听input事件时，函数的第一个参数将是传递的值：

async foo(value) {
        console.log(value, this.myVar);
    }

推荐阅读