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> 

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

标签： javascriptvue.js

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