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

Question

嗨，有没有一种方法可以停止在 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;
                        });
                }
            });

这是我的dom。

              <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> 

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

Answer 1

如何将输入变量分组为单个输入，然后设置观察器并仅在输入发生变化时更新项目？

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>