Vuejs v-model 绑定在模糊到axios param

Question

我正在尝试将输入传递给axios param。控制台.log(country_id( 在模糊时正确返回country_id，公理country_id参数未填充，我错过了什么

<div id="app">
        <input v-model="country_id" v-on:blur="addCountryId" />
        <ul>
            <li v-for="uploaded_segment in uploaded_segments"> @{{ uploaded_segment.name }}</li>
        </ul>
</div>
<script>
    new Vue({
    el: '#app',
    data: {
        uploaded_segments: [],
        country_id :''
    },
    methods: {
        addCountryId(){
     country_id= this.country_id;
     console.log(country_id);
}
},
    mounted() {
 axios.get('/get_segments', {
        params: {
            country_id: this.country_id
        }
    }) .then(response => this.uploaded_segments = response.data);
}
});

Answer 1

正如 user7814783 在对 OP 的注释中所解释的那样，挂载的钩子在渲染后只运行一次 - 此时，country_id仍然是空的 (''(。

您可能更愿意使用监视功能：

watch: {
  country_id(newlValue) {
    axios.get('/get_segments', {
        params: {
            country_id: this.country_id
        }
    }) .then(response => this.uploaded_segments = response.data);
  }
}

由于每次用户更改 1 个字符时都会触发请求，因此请考虑使用懒惰标志 ( v-model.lazy="country_id" ( 或去抖动观察程序函数 (https://v2.vuejs.org/v2/guide/migration.html#debounce-search-demo(

编辑：回答来自表彰的后续：

我如何处理在监视功能上更改的多个参数，这个想法是有多个选择来过滤段：paste.laravel.io/8NZeq

将功能移动到一个方法中，为要监视的每个数据添加一个 wathcer，从每个数据中调用该方法

watch: {
  country_id: 'updateSegments',
  // short for: country_id: function() {  this.updateSegments() }
  brand_id: 'updateSegments',
},
methods: {
  updateSegments() {
        axios.get('/get_segments', {
            params: {
                country_id: this.country_id,
                brand_id: this.brand_id
            }
        }) .then(response => this.uploaded_segments = response.data);
      }
}