vue.js阻止一个数据元素触发更新

时间:2018-12-12 21:00:29

标签: javascript vue.js

嗨,有没有一种方法可以仅在一个元素上停止在vue实例中触发更新的方法?这是我的代码,

vue实例..

           var vm = new Vue({
                el: '#el',
                data: {
                    cap: "",
                    radius: "",
                    var1: "",
                    var2: "",
                    var3: "",
                    items: null,
                }
                updated: function () {
                    axios.post('{{ url('car_result') }}', {data: this.$data})
                           .then(response => {
                            this.items = response.data;
                        });
                }
            });

这是我的家。

              <div id="el">
                    <input v-model="cap" type="text">
                    <input v-model="radius" type="text">
                    <input v-model="var1" type="text">
                    <input v-model="var2" type="text">
                    <input v-model="vat3" type="text">

                    <div class="item" v-for="item in items">
                        {{ item.id }}
                    </div>
                </div> 

在这里,我需要在项目更改时停止触发更新的方法

1 个答案:

答案 0 :(得分:1)

如何将输入变量分组为单个input,然后设置观察者并仅在items发生变化时更新input

var vm = new Vue({
  el: '#el',
  data: {
    input: {
      cap: "",
      radius: "",
      var1: "",
      var2: "",
      var3: ""
    },
    items: null,
  },
  watch: {
    input: {
      handler (newInput) {
        axios.post('{{ url('car_result') }}', { data: newInput })
          .then(response => {
            this.items = response.data;
          });
      },
      deep: true
    }
  }
});

在您的模板中:

<div id="el">
  <input v-model="input.cap" type="text">
  <input v-model="input.radius" type="text">
  <input v-model="input.var1" type="text">
  <input v-model="input.var2" type="text">
  <input v-model="input.vat3" type="text">

  <div class="item" v-for="item in items">
    {{ item.id }}
  </div>
</div>